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人 〇 倾情 奉献 书 中 所 有 操作 案例 的 源 文件 
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内 容 简 介 

HTML 5 是 取代 HTML 4 的 新 一 代 Web 技 术 ， 它 将 会 成 为 HTML、XHTML 以 及 HTML DOM 的 新 
标准 。 

本 书 系统 、 全 面 讲解 了 HTML 语 言及 其 最 新 版 本 HTML 5 的 新 功能 与 新 特性 ， 技 术 新 颖 实用 。 书 中 
大 部 分 的 知识 点 都 结合 实例 进行 讲解 ， 读 者 在 学 习 基 础 知识 后 ， 亲 手 实践 ， 可 以 快速 巩固 所 学 知识 。 

在 每 一 个 实例 之 后 都 会 对 该 实例 以 及 知识 点 的 重要 部 分 进行 提问 ， 并 进行 详细 解答 ， 使 读者 系 
统 而 全 面 地 学 习 理论 知识 。 书 中 的 知识 点 所 涉及 的 代码 都 会 给 出 详细 的 注释 ， 从 而 使 读者 轻松 领会 
HTML 语 言 的 精髓 ， 更 加 快速 地 提高 技能 。 

本 书 附 赠 1 张 CD 光盘 ， 其 中 提供 了 丰富 的 练习 素材 、 源 文件 ， 并 为 书 中 所 有 实例 都 录制 了 多 媒体 
教学 视频 ， 方 便 读者 学 习 和 参考 。 

本 书 内 容 详 尽 ， 实 例 丰 富 ， 非 常 适合 作为 编程 初 、 中 级 读者 的 学 习 用 书 ， 也 适合 作为 开发 人 员 的 
参考 资料 。 
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全 书 所 有 操作 实例 均 配 有 操作 过 程 演示 ， 共 181 个 近 190 分 钟 视频 


taal 
LETEN 


Gl 
ETIS 


25- Ai-lswf 13-125w 13-115wf 


13-10S 
m a a aaan nun nunun 
Z A A A A A FA A FE 


m a u a m 
a 5 a e a d Eà a a A A 
126 isat dawe 123 aa iie ee Sa 1445% 1435% aa iwe oG 95s oA 
wa u Du ml 5 P Dl 57 i a ed 
9-3-2swf 9-3-lswf 9-2-10.wí 9-2-Oswf 9-2-8swf 9-2-Tswf 9-2-Gswfh 9-2-5, 9-2-4swh 9-2-3, 9-2-2sw 9-2-1, 9-1-5iswf 9-1-4, 9-1-35wf 
Ku a ú “z s ú s s s ús ús s s ú“ a 
£ £ £ d £ ad £ d ¿A 区 £ £ £ ai r 
9-1-2ewh 9-1-1iewf 8-5-10swi — BAe? 8-22a 7-41ewh 7-3-2 7-31a 724 Ta 7-220w TEA 66 6-5-2ewf 65-TEwF 
m a E a a aa nan nn “u ú“ “m ús ú“ a 
j z oi rÀ 四 oai 2: i 区 区 aå £ £ 
emh cimi crimi = u J; GIA — 63250 I uuu Ku— 4m 
二 ES ia a ia ia ia Ea be hoa ua iE Ra RA Baa 
£ 学 学 Ed £ Ed / 学 j 学 £ d 
4-8Ew6  4-T-2iswf 47swf — 4-6-4swË 463swF 4-62Sw6 46 454swh 45-3swt 452S 451 4-5-1 451 4-4-2swf  4-2.swf 
Ca (Z)s (2) 
EA be EA EA EA EA EA EA EA EA TA EA EZE EA 
ca al La £ i s” s. 四 £ 区 a - r £ 
arami ArmA 44 


光盘 中 提供 的 视频 为 SWF 格式 ， 这 种 格式 的 优点 是 体积 小 ,播放 快 ， 可 操控 。 除 了 可 以 使 用 F ash P byer 播 放 外 ， 
还 可 以 使 用 暴风 影音 、 快 播 等 多 种 播放 器 播放 。 
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在 现在 这 个 互联 网 飞速 发 展 的 时 代 ， 网 络 已 经 成 为 人 们 生活 中 不 可 或 缺 的 一 部 分 ， 作 
为 更 加 新 颖 、 全 面 的 技术 ，HTML 5 标准 具有 巨大 的 魅力 和 市 场 前 景 。 该 技术 目前 已 经 开 
始 影响 我 们 的 生活 、 工 作 和 学 习 ， 相 信 在 不 久 的 将 来 ，HTML 5 将 会 成 为 业内 正式 的 标准 
并 得 到 所 有 人 的 认可 。 

在 这 种 形势 下 ， 学 习 并 掌握 HTML 5 无 疑 成 为 Web 开发 者 的 一 项 重要 任务 。 


本 书 内 容 


全 书 共 分 16 章 ， 通 过 结合 实例 操作 ， 向 用 户 详细 而 系统 地 讲解 了 HTML 5 的 相关 规 
则 和 功能 ， 每 一 个 知识 点 的 介绍 和 实例 都 讲解 得 通俗 易 懂 。 

第 1 章 介绍 了 HTML 5 的 基础 知识 ， 包 括 HTML 5 的 基本 结构 、 标 签 属性 以 及 HTML 5 
的 编写 方法 等 。 

第 2 章 详 细 介 绍 网 页 的 基本 标签 ， 其 中 包括 网 页 头 部 标签 、meta 标签 、 主 体 标签 、 文 
字 与 段落 标签 、 图 像 标 签 以 及 列表 标签 等 。 

第 3 章 介绍 超 链接 的 建立 方法 ， 包 括 链 接 的 基础 知识 、 基 本 链接 的 定义 方法 、 链 接 的 
路 径 、 内 部 链接 、 锚 点 链接 以 及 外 部 链接 等 。 

第 4 章 介绍 canvas 的 使 用 方法 ， 其 中 包括 canvas 元 素 的 基本 概要 、 绘 制 矩形 的 方法 、 
使 用 路 径 、 绘 制 渐变 图 形 、 绘 制图 像 、 图 形 的 变形 、 绘 制 文本 、 图 形 的 组 合 、 绘 制 阴影 、 
绘制 动画 效果 以 及 保存 与 恢复 绘图 状态 等 。 

第 5 章 主要 对 CSS 进行 讲解 和 应 用 ， 其 中 包括 XHTML 的 介绍 、CSS 的 概念 、CSS 的 
分 类 、CSS 文档 结构 、CSS 选择 器 、CSS 选择 器 声明 以 及 伪 类 和 伪 对 象 等 。 

第 6 章 主 要 介绍 SVG 的 使 用 方法 ， 其 中 包括 SVG 的 基础 概要 、SVG 的 语法 基础 、 绘 
制 SVG 基本 图 形 、 绘 制 文本 、SVG 渐变 效果 和 样式 单 等 。 

第 7 章 主要 介绍 音频 和 视频 在 网 页 中 的 插入 方法 , 其 中 包括 <audio> 和 <video> 的 概要 、 
<audio> 和 <video> 的 属性 、<audio> 和 <video> 的 方法 、<audio> 和 <video> 的 事件 等 。 

第 8 章 主要 介绍 链 入 内 联 框 架 、 对 象 和 其 他 多 媒体 元 素 ， 其 中 包括 内 联 框 架 、iframe 
元 素 的 属性 、 沙 盒 安全 限制 使 用 object 元 素 链 入 对 象 和 使 用 embed 元 素 链 入 多 媒体 对 象 等 。 

第 9 章 介绍 表单 的 使 用 方法 ， 其 中 包括 表单 标签 <form>、 插 入 表单 对 象 、 菜 单 和 列表 、 
文本 域 标签 textarea 和 id 标签 等 。 

第 10 章 主要 介绍 离线 网 络 应 用 ， 其 中 包括 文件 缓存 的 实现 方法 和 定义 缓存 清单 文件 的 
方法 等 。 

第 11 章 主 要 介绍 JavaScript 脚 本 基础 ， 其 中 包括 JavaScript Ë ff. JavaScript 基本 语法 、 
JavaScript 事件 和 浏览 器 的 内 部 对 象 等 。 

第 12 章 通过 实例 的 形式 向 用 户 介绍 HTML 文字 特效 的 制作 方法 ， 其 中 包括 彩色 文字 
移动 效果 、 文 字 滚 动 效果 、 文 字 跟 随 鼠 标 效果 、 文 字 输 入 效果 、 文 字 蔡 换 效 果 、 文 字 和 颜 
色 转 换 以 及 文字 渐 显效 果 等 。 

第 13 章 通过 实例 的 形式 向 用 户 介绍 HIML 图 片 特 效 的 制作 方法 ， 其 中 包括 图 片 放 大 
缩小 、 图 片 放 大 镜 效果 、 图 片 拌 动 效果 、3D 相册 特效 、 滚 动 的 照片 写真 效果 、 图 片 切 块 换 
图 片 效 果 、 鼠 标 移动 时 展示 大 图 效果 、 图 片 缩放 效果 、3D 效果 换 图 、 全 屏 漂浮 的 图 片 效 果 、 
图 片 展 示 效 果 、 收 缩 切 换 图 像 效果 和 精致 的 相册 效果 等 。 
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第 14 章 通过 实例 的 形式 向 用 户 介绍 HTML 交互 特效 的 制作 方法 ， 其 中 包括 广告 交互 
效果 、 网 页 相册 效果 、 点 击 展示 效果 、 鼠 标 拖 自 效果 、 鼠 标 交互 效果 和 导航 跳 转 效 果 等 。 

第 15 章 通过 实例 的 形式 向 用 户 介绍 HTML 动画 特效 的 制作 方法 ， 其 中 包括 笑脸 水 泡 
动画 、 旋 转 的 立体 花朵 动画 、 秋 天 落叶 动画 、 小 球 跳动 动画 、 大 风车 动画 、 变 幻 的 3D 动画 、 
太阳 系 动 画 、 跑 车 开动 动画 和 白天 到 黑夜 的 动画 等 。 

第 16 章 通过 实例 的 形式 向 用 户 介绍 HTML 其 他 特效 的 制作 方法 ， 其 中 包括 仿 手机 滑 
屏 特 效 、 时 钟 特效 、 书 本 翻 页 特效 、 游 戏 特效 、 磁 带 播放 特效 、 可 拖 动 的 池子 球 特效 等 。 


本 书 特 点 

本 书 以 Dreamweaver CS6 软件 为 编辑 器 ， 全 面 细致 地 讲解 了 HIML 5 在 网 页 设计 领域 
的 相关 知识 ， 对 于 网 页 设计 的 初学 者 来 讲 ， 是 一 本 难得 的 实用 型 自学 教程 。 
。 紧 扣 主 题 

本 书 全 部 章节 均 围 绕 着 网 页 设计 与 制作 的 主题 展开 ， 所 制作 的 实例 也 均 与 网 页 设计 相 
关 ， 书 中 实例 精美 ， 并 且 内 容 实用 性 较 强 。 
。 易学 易 用 

书 中 采用 基础 知识 与 实例 相 结合 的 书写 方式 ， 使 用 户 在 学 习 后 立即 可 对 学 习 的 内 容 进 
行 巩固 ， 使 学 习 的 成 果 达 到 最 大 化 。 
。 多 媒体 光盘 辅助 学 习 

为 了 增加 读者 的 学 习 渠 道 ， 增 强 读者 的 学 习 兴趣 ， 本 书 配 有 多 媒体 教学 光盘 ， 在 光盘 
中 提供 了 本 书 所 有 实例 的 相关 素材 、 源 文件 以 及 视频 教学 ， 使 读者 可 以 得 到 仿佛 老师 亲自 
指导 一 样 的 学 习 体 验 ， 并 能 够 快速 应 用 于 实际 工作 中 。 


本 书 作者 


本 书 由 贾 勇 编著 , 另外 李 晓 斌 、 张 晓 景 、 解 晓 丽 、 孙 臣 、 程 雪 翩 、 王 媛 媛 、 胡 丹 丹 、 刘 了 明秀 、 
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兰 等 人 也 参与 了 编写 工作 。 本 书 在 写作 过 程 中 力求 严谨 , 由 于 水 平 有 限 , 疏漏 之 处 在 所 难免 
望 广大 读者 批评 指正 。 
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# 1 = HTML 5 基础 


随 着 互联 网 的 发 展 ， 掌 握 作为 万 维 网 核心 语言 的 
HTML 是 大 势 所 趋 的 必修 课程 。 本 章 将 针对 HTML 的 基 
础 知识 进行 详细 讲解 。 


1.1 关于 HTML | 


HTML 是 当前 应 用 最 为 广泛 、 最 炙手可热 的 一 种 编程 
语言 ， 它 可 以 将 存放 在 一 台 计算 机 中 的 文本 或 图 形 与 另 一 
台 计算 机 中 的 文本 或 图 形 关联 在 一 起 ， 形 成 有 机 的 整体 。 


ARE 什么 是 HTML5 


30 
HTML 是 英文 HyperText Mark-up Language 的 简称 ， 本 章 知识 点 


即 超 文本 标记 语言 ， 它 是 W3C 组 织 推荐 使 用 的 一 个 国际 


标准 ，HTML 的 最 新 版 本 是 HTML 5。 | 认识 HIML5 
HTML 5 是 HTML 在 经 历 了 近 十 年 的 停滞 之 后 迎 来 Fe | 
的 一 个 新 标准 ， 也 将 成 为 下 一 代 的 Web 标准 。HTML 5 | 了 解 HTML 5 的 结构 
具有 全 新 的 、 更 加 语义 化 的 、 合 理 的 结构 化 元 素 ， 更 具 表 
现 力 的 表单 控件 ， 以 及 多 媒体 视频 和 音频 支持 和 更 加 强大 v| 认识 HTML 5 新 增 元 素 
的 交互 操作 功能 。 
V] 掌握 HTML 5 的 编辑 方法 
W3C 是 Wor1d Wide Consortium 的 简称 ， 
也 就 是 “万 维 网 联盟 ”或 “万 维 网 协会 ”， 可 了 解 HTML 的 预览 方法 
成 立 于 1994 年 10 月 。 


y 


HTML 5 的 基本 结构 | 


每 一 个 HTML 5 文档 都 是 由 4 个 基本 部 分 组 成 ， 结 
构 如 下 。 


(© UDAO J 


@ 文档 类 型 声明 
在 使 用 HTML 语法 编写 HTML 5 文档 时 ， 需 要 指定 文档 类 型 ， 以 确保 浏览 器 能 够 在 
HTML 5 标准 模式 下 泻 染 网 页 ， 文 档 类 型 声明 格式 如 下 : 
<!doctype html> 
@ <html>---</html> 标签 对 
<html> 标签 用 来 标示 HTML 文档 的 开始 ， 而 </html> 标签 与 <html> 标签 相反 ， 用 来 
标示 HTML 文档 的 结束 。 
图 《head>…</head> 标签 对 
<head> 和 </head> 构成 HTML 文档 的 开头 部 分 ， 用 来 描述 HTML 文档 的 相关 信息 ， 
在 此 标签 对 之 间 可 以 使 用 <title>…</title> 和 <script>…</script> 等 标签 对 。 
@ 《body>…《/body>》 标签 对 
<body>…</body> Æ HTML 文档 的 主体 部 分 ，<body>…</body> 标签 对 之 间 的 内 容 是 
浏览 器 窗口 中 显示 的 主要 内 容 。 


时 在 HTML 5 文档 中 编写 代码 的 过 程 中 ， 注 意 HTML 语法 不 区 分 大 小 写 ， 但 
是 建议 用 户 都 使 用 小 写 ， 这 是 HTML 未 来 发 展 的 方向 。 


三》 实例 01+ 视频 : 创建 HTML 页 面 
o an aE 


miem mies- 


i poan re ss Ri 


f 源 文件 : 源 文件 \ 第 1 章 \1-1-2.html 


SRE EEV) O 插入 (1 EAM) 


打开 (O)… Ctrl+O 


在 Bridge 中 浏览 (B)… Ctrl+Alt+O 
打开 最 近 的 文件 (D » 
在 框架 中 打开 (PP).. Ctrl+Shift+O 
关闭 (O Ctrl+W 


[Lo1 多 打开 Adobe Dreamweaver CS6 软件 , 执行 “文件 > 新建 ” 命令 ， 在 弹出 的 “新 建文 档 
对 话 框 中 设置 “页 面 类 型 ”为 HTML， “文档 类 型 ”为 HTML 5， 单 击 “ 创 建 ” 按 钮 ， 创 
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建 一 个 HTML 5 文档 。 


[ 02 PF] 单 击 选项 栏 中 的 “代码 ”按钮 切换 到 代码 视图 ， 在 <body> 标签 中 输入 相应 的 代码 
和 内 容 。 


按钮 。 


器 窗口 中 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “查看 源 文件 ”命令 ， 即 可 查看 HIML 源 文 件 。 


Q ZW sa. 创建 hr paesa? 
条 答 : 因为 HTML 只 是 文本 ， 所 以 任何 文本 编辑 器 均 可 对 其 进行 编辑 ， 
例如 记事 本 和 写字 板 ， 如 果 需 要 创建 更 加 精彩 的 效果 ， 可 以 使 用 可 视 化 编辑 
软件 FrontPage 和 Dreamweaver。 


KER HTML 5 的 标签 
标签 可 以 用 来 标记 内 容 块 ， 为 每 一 个 元 素 的 开始 和 结束 做 标记 。 标 签 使 用 尖 括 号 包围 ， 
例如 <html>…</html>， 表 示 一 个 HTML 5 文件 。 标 签 的 使 用 有 两 种 形式 ， 分 别 是 成 对 出 
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现 的 标签 和 单独 出 现 的 标签 。 
@ 成 对 出 现 的 标签 

成 对 出 现 的 标签 即 包 含 开始 标签 和 结束 标签 的 形式 ， 基 本 格式 如 下 : 

< 开始 标签 > 内 容 </ 结 束 标签 > 
@ 单独 出 现 的 标签 

如 果 在 开始 标签 和 结束 标签 中 间 没有 内 容 ， 即 可 使 用 单独 出 现 的 标签 ， 例 如 换行 标签 
<br>， 基 本 格式 如 下 : 

一 些 内 容 <br> 

另 一 些 内 容 <br> 

虽然 并 非 所 有 的 开始 标签 都 必须 有 结束 标签 与 之 对 应 ， 但 是 建议 成 对 出 现 ， 这 样 网 页 
易于 阅读 和 修改 。 


时 在 HTML 5 文档 中 ， 无 论 是 成 对 出 现 的 标签 ， 还 是 单独 出 现 的 标签 ， 都 
不 可 以 包含 空格 。 


HTML 5 具有 很 多 实用 的 标签 ， 使 用 这 些 标签 制作 网 页 不 但 改进 了 网 页 的 可 操作 性 ， 
而 且 还 减少 了 网 站 的 开发 成 本 ，HTML 5 标签 如 下 : 


标 签 描 述 
<!-- > 定义 注释 
<!DOCTYPE> 定义 文档 类 型 
<a> 定义 超 链接 
<abbr> 定义 缩写 
<address> 定义 地 址 元 素 
<area> 定义 图 像 映 射 中 的 区 域 
<article> HTML 5 新 增 ， 定 义 article 
<aside> HTML 5 新 增 ， 定 义 页 面 内 容 之 外 的 内 容 
<audio> HTML 5 新 增 ， 定 义 声音 内 容 
<b> 定义 粗 体 文本 
<base> 定义 页 面 中 所 有 链接 的 基准 URL 
<bdo> 定义 文本 显示 的 方向 
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( 续 表 ) 
标 签 描 述 
<blockquote> 定义 长 的 引用 
<body> 定义 body 元 素 
<br> 插入 换行 符 
<button> 定义 按钮 
<canvas> HTML 5 新 增 ， 定 义 图 形 
apoq 定义 表格 标题 
<cite> 定义 引用 
<code> 定义 计算 机 代码 文本 
<col> 定义 表格 列 的 属性 
<colgroup> 定义 表格 式 的 分 组 
<command> HTML 5 新 增 ， 定 义 命令 按钮 
<datagrid> HTML 5 新 增 ， 定 义 树 列表 中 的 数据 
<datalist> HTML 5 新 增 ， 定 义 下 拉 列 表 框 
<dataemplate> HTML 5 新 增 ， 定 义 数 据 模板 
<dd> 定义 自 定义 的 描述 
<del> 定义 删除 文本 
<details> HTML 5 新 增 ， 定 义 元 素 的 细节 
<dialog> HTML 5 新 增 ， 定 义 对 话 框 
<div> 定义 文档 中 的 一 个 部 分 
<dfn> 定义 自 定义 项 目 
<dl> 定义 自 定义 列表 
<dt> 定义 自 定义 的 项 目 
<em> 定义 强调 文本 
<embed> HTML 5 新 增 ， 定 义 外 部 交互 内 容 或 插件 
<event-source> HTML 5 新 增 ， 为 服务 器 发 送 的 事件 定义 目标 
<fieldset> 定义 fieldset 
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( 续 表 ) 
标 签 描 述 
<figure> HTML 5 新 增 ， 定 义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 
<font> 定义 文本 的 字体 、 尺 寸 和 颜色 
<footer> HTML 5 新 增 ， 定 义 section 或 page 的 页 肢 
<form> 定义 表单 
<h1> to <h6> 定义 标题 1 至 标题 6 
<head> 定义 关于 文档 的 信息 
<header> HTML 5 新 增 ， 定 义 section 或 page 的 页 眉 
<hr> 定义 水 平 线 
<html> 定义 HTML 文档 
<i> 定义 斜体 文本 
<iframe> 定义 行内 的 子 窗口 (框架 ) 
<img> 定义 图 像 
<input> 定义 输入 域 
<ins> 定义 插入 文本 
<kbd> 定义 键盘 文本 
<label> 定义 表单 控件 的 标注 
<legend> 定义 fieldset 中 的 标题 
<li> 定义 列表 的 项 目 
<link> 定义 资源 引用 
<m> HTML 5 新 增 ， 定 义 有 记号 的 文本 
<map> 定义 图 像 映射 
<menu> 定义 菜单 列表 
<meta> 定义 元 信息 
<meter> HTML 5 新 增 ， 定 义 预定 义 范围 内 的 度量 
<nav> HTML 5 新 增 ， 定 义 导航 链接 
<nest> HTML 5 新 增 ， 定 义 数据 模板 中 的 谋 套 点 
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( 续 表 ) 
标 签 描 述 
<object> 定义 嵌入 对 象 
<ol> 定义 有 序列 表 
Sapi 定义 选项 组 
<option> 定义 下 拉 列 表 框 中 的 选项 
<output> HTML 5 新 增 ， 定 义 输出 的 一 些 类 型 
=== 定义 段落 
<param> 为 对 象 定义 参数 
<pre> 定义 预 格式 化 文本 
<progress> HTML 5 新 增 ， 定 义 任何 类 型 的 任务 进度 
<q> 定义 短 的 引用 
<rule> HTML 5 新 增 ， 为 升级 模板 定义 规则 
<samp> 定义 样本 计算 机 代码 
<script> 定义 脚本 
<section> HTML 5 新 增 ， 定 义 section 
<select> 定义 可 选 列表 
<source> HTML 5 新 增 ， 定 义 媒介 源 
<span> 定义 文档 中 的 行内 元 素 
<strong> 定义 强调 文本 
<style> 定义 样式 定义 
<sub> 定义 上 标 文本 
<sup> 定义 下 标 文本 
<table> 定义 表格 
<tbody> 定义 表格 的 主体 
<td> 定义 表格 单元 
<textarea> 定义 文本 区 域 
<tfoot> 定义 表格 的 脚注 
<th> 定义 表 头 
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( 续 表 ) 

标 签 描 述 

<thead> 定义 表 头 

<time> HTML 5 新 增 ， 定 义 日 期 / 时 间 

<title> 定义 文档 的 标题 

<tr> 定义 表格 行 

<ul> 定义 无 序列 表 

<var> 定义 变量 
<video> HTML 5 新 增 ， 定 义 视频 


HTML 文件 可 以 直接 由 浏览 器 解释 执行 ， 而 无 须 编译 。 当 用 浏览 器 打开 
网 页 时 ， 浏 览 器 会 自动 读 取 网 页 中 的 HTML 标签 代码 ， 分 析 其 中 的 语法 结构 ， 
然后 根据 解释 显示 网 页 中 的 内 容 。 


mD 实例 02+ 视频 : 使 用 标签 的 方法 


— 
ape ( 一 ) 
党 记 笑 奉 日 本， 这 莞 不 知 归 路， 


Wang. 
RAN- 
ABTA. #i8siplB. 
ma, Wa? 
TRAMBLE! 


AR: 源 文件 \ 第 


L 


1 # \1-1-3. html 


<body> 标签 中 ， 并 输 


入 相应 的 文字 。 


[ 01 P| 打开 Dreamweaver 软件 ， 新 建 一 个 HTML 5 文档 ， 在 代码 视图 中 ， 将 光标 插入 到 
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a 
ZETT 


[02 9] 按 快捷 键 CtrlH+S， 将 文档 保存 为 “ 源 文 件 \ 第 1 章 \1-1-3.html”。 按 Fl12 键 测试 此 
时 页 面 的 效果 ， 观 察 此 时 的 文字 效果 。 


<body> 

<p> 如 梦 令 (—) </p> 
<py> 常 记 溪 亭 日 昔 ， 沉 醇 不 知 归 路 ，</p> 
<p> 兴 尽 晚 回 舟 ， 误 入 草花 深 处 。 </P> 
<p> 争 渡 ， 争 渡 ， 惊 起 一 滩 欧 路。</p> 
<p> 如 梦 令 (二 ) </p> 


<p> È EIRE! </p> amena 


B a T -m 


[ 03 多 返回 Dreamweaver 软 件 中 , 对 刚刚 输入 的 文字 添加 <p> 标签 。 再 次 按 F12 键 测试 页 面 ， 


提问 : 在 书写 标签 时 ， 可 以 省 略 后 面 的 标签 吗 ? 

答 : 在 成 对 的 标签 中 ， 后 面 的 标签 是 结束 标签 ， 在 书写 或 编辑 HTML 
代码 时 ， 用 户 不 可 以 随便 省 略 结束 标签 ， 这 样 做 可 能 会 产生 一 些 无 法 预料 的 
错误 ， 并 且 这 样 做 也 不 符合 书写 规范 。 


(KEN HTML 5 属性 


与 元 素 相关 的 特性 称 为 属性 ， 还 可 以 为 属性 赋值 (每 一 个 属性 对 应 一 个 属性 值 ， 因 此 
也 被 称 作 “ 属 性 / 值 ”对 ) 。“ 属 性 / 值 ” 对 出 现在 元 素 开始 标签 的 “>” 之 前 ， 其 与 元 素 
以 空格 分 隔 。 

在 HTML 中 ， 对 属性 值 的 定义 方式 有 多 种 ， 分 别 是 不 定义 属性 值 、 属 性 值 中 包含 空白 
和 属性 值 中 使 用 双 引 号 和 单 引 号 ， 但 属性 值 必须 都 是 字符 串 。 
Ə 不 定义 属性 值 

HTML 规定 属性 可 以 没有 值 ， 例 如 <dl compact> 是 合法 的 ， 浏 览 器 会 使 用 compact 的 
默认 值 ， 但 是 有 些 属性 没有 默认 值 ， 因 此 不 可 以 省 略 属性 值 。 
@ 属性 值 中 包含 空白 

属性 值 中 可 以 包含 空白 ， 但 是 需要 使 用 引号 ， 因 为 属性 之 间 也 是 使 用 空白 分 隔 的 ， 不 
过 尽量 避免 使 用 空白 。 


<div class="classl" id="ab" style="clear:both"> 
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@ 属性 值 中 使 用 双 引 号 和 单 引号 

在 HTML 中 可 以 使 用 单 引 号 ， 当 使 用 单 引号 包括 属性 值 时 ， 就 不 可 以 再 包括 其 他 属性 
值 ， 此 时 必须 使 用 双 引 号 包括 属性 值 。 

<p title" 他 是 中 国 著名 的 ' 作 家 ' "> 巴金 </p> 


g 在 HTML 5 文档 中 , 元 素 可 以 有 多 个 “属性 / 值 " 对 , 并 且 不 区 分 前 后 顺序 ， 
但 是 不 可 以 在 同一 个 开始 标签 中 定义 同名 的 属性 。 
在 HTML 5 中 新 增 的 属性 有 contenteditable、contextmenu、 draggable, irreievant/ref. 
registrationmark 和 template， 不 再 支持 HTML 4.01 的 accesskey 属性 。 
属 性 值 描 述 
class class mle oF 元 素 的 类 名 
style rule 
contenteditable true. false 设置 是 否 允许 用 户 编辑 元 素 
contextmenu esau 给 元 素 设置 一 个 上 下 文 菜单 
element 
dir ltr. rtl 设置 文本 方向 
draggable true. false, auto | 设置 是 否 允 许 用 户 拖 动 元 素 
id id name 元 素 的 唯一 id 
irrelevant true false 设置 元 素 是 否 相 关 ， 不 显示 非 相 关 的 元 素 
lang language_code 设置 语言 码 
£ Tapa u 引用 另 一 个 文档 或 本 文档 上 另 一 个 位 置 ， 
ü eg 仅 在 template 属性 设置 时 使 用 
a k eisat P JTRREES, HAF <nest> 元 素 以 外 
registrationmar] registration mar 的 任何 <rule> 元 素 的 后 代 元 素 
style style definition 行内 的 样式 定义 
tabindex number 设置 元 素 的 tab 顺序 
aa 引用 应 该 应 用 到 该 元 素 的 另 一 个 文档 或 本 
emplate url or elemeni 文档 上 另 一 个 位 置 
title tooltip_text 显示 在 工具 提示 中 的 文本 


Y 
= 实例 03+ 视频 : 使 用 标签 属性 的 方法 


下 m- 2 z Qm - w + 


f 源 文件 : 源 文件 \ 第 1 章 \-1-4.html 


[Dw mv o, a- 

RWA RRD ESM MAD MAM WNO SHO ils SOW mms 
krsnim x Er 
[ee 


<span> 
<p> 台 本 令 《一 ) </p> 

<p ŽSS. IATA </p> 
<p> 兴 尽 晚 回 舟 ， 误 入 基 花 深 处 *。 </p> 
<p> 争 渡 ， 争 渡 ， 惊 起 一 潍 欧 路。</p> 


—Y 3 


<p> 试 问卷 帘 人 ， 却 道 海 业 依 旧 。</p> 
<p> 知 否 ， 知 否 ? </p> 
<p ERIEIN! </p> 


</span> 


</p> 
S TETAI </p> 

TES EMIR, WAS ° </p> 
<p> 争 渡 ， 争 渡 ， 惊 起 一 滩 欧 路 。</p> 
<p> 如 梦 令 (二 ) </p> 
<PERR. </p> 
<p> 浓 睡 不 消 残 酒 。</p> 
<p> 试 问卷 帘 人 ， 却 道 海 党 依旧 。</p> 
<p> 知 否 ， 知 否 ? </p> 

<p> 应 是 绿肥 红 瘦 ! </p> 


</span> 


[ 02 PP] 在 <span> 标签 的 开始 标签 中 ， 输入 标签 属性 。 执行 “文件 > 另存 为 ” 命令 ， 将 文档 
保存 为 “ 源 文件 \ 第 1 章 \1-1-4.html”， 按 Fl12 键 测试 页 面 。 


? 个 提问 : 在 HTML 中 每 个 标签 的 属性 都 是 固定 的 吗 ? 
EJ 答 : 在 HTML 4 时代， 每 个 标签 元 素 可 以 定义 的 属性 都 是 固定 的 ， 但 是 
在 HIML 5 中 ， 用 户 除了 可 以 为 每 个 标签 元 素 定义 HTML 规范 的 固定 属性 
以 外 ， 还 可 以 为 标签 元 素 指定 一 些 自 定义 的 属性 。 


1.1.5 HTML 5 事件 属性 


HTML 中 的 元 素 拥有 事件 属性 ， 这 些 属 性 在 浏览 器 中 具有 触发 行为 ， 当 用 户 单 击 一 
HTML 元 素 时 ， 就 会 启动 JavaScript 脚本 定义 的 事件 行为 ， 具 体 属 性 值 和 描述 如 下 。 


蕊 5 对 HTM 5 > 网 页 制作 > 全 程 揭秘 J 


属 性 值 描 述 
onabort JavaScript 代码 | 当 元 素 的 内 容 被 取消 加 载 时 触发 
onblur JavaScript 代码 | 当 元素 失 去 焦点 时 触发 该 事件 
oncanplay JavaScript 代码 | 当 能 够 进行 回放 时 触发 ， 但 还 是 会 要 求 缓冲 
当 能 够 进行 不 间断 回放 时 触发 ， 即 不 要 求 缓冲 
oncanplaythrough JavaScript 代码 就 可 以 顺利 播放 完 
onchange JavaScript 代码 | 当 元 素 的 值 发 生变 化 时 触发 
onclick JavaScript 代码 | 当 定 位 设备 在 一 个 元 素 上 单 击 时 触发 
oncontextmenu JavaScript 代码 | 当 鼠 标 右 击 该 元 素 打开 快捷 菜单 时 触发 
ondblclick JavaScript 代码 | 当 定 位 设备 在 一 个 元 素 上 双击 时 触发 
ondrag JavaScript 代码 | TRAH RAE 
ondragend JavaScript 代码 | 当 元 素 从 拖 电 状 态 结束 时 即 释放 时 该 事件 被 触发 
ondragenter JavaScript 代码 | 当 另 一 个 被 拖 息 元 素 进入 当前 元 素 时 触发 该 事件 
JavaScript 代码 E E 
EE JavaScript 代码 当 另 一 个 被 拖 抱 的 元 素 经 过 当前 元 素 时 该 事件 
被 触发 
ondragstart JavaScript 代码 | 当 一 个 对 象 被 放置 到 当前 元 素 时 被 触发 
ondrop JavaScript 代码 | 当 元 素 正在 拖 忠 状态 时 该 事件 被 触发 
ondurationchange JavaScript 代码 | 当 duration 属性 发 生 改变 时 触发 
onemptied JavaScript 代码 | 当 media 元 素 恢复 到 初始 状态 时 触发 
onended JavaScript 代码 | 当 播 放 到 结束 时 触发 
onerror JavaScript 代码 | 当 与 此 元 素 相 关联 的 对 象 有 错误 发 生 时 触发 该 事件 
onfocus JavaScript 代码 | 当 元 素 获 取 焦 点 时 触发 
onformchange JavaScript 代码 | 当 表 单 改 变 时 触发 
onforminput JavaScript 代码 | 当 表单 获得 用 户 输入 时 触发 
oninput JavaScript 代码 | 当 元 素 获得 用 户 输 入 时 触发 
oninvalid JavaScript 代码 | 当 元 素 无 效 时 触发 
onkeydown JavaScript 代码 | 当 元 素 处 于 焦点 状态 下 按 某 个 键盘 键 时 触发 该 事件 
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( 续 表 ) 
wl 什 描述 
onkeypress JavaScript 代码 HRE T AURRA TEE T EEEn) 
触发 该 事件 
onkeyup Javascript 代码 | 当 元 素 处 于 焦点 状态 下 释放 某 个 按 着 的 键盘 键 
时 触发 该 事件 
onload JavaScript 代码 | 在 元 素 的 内 容 完 成 加 载 后 被 触发 


onloadeddata JavaScript 代码 | 当 元 素 失去 鼠标 指针 捕捉 时 触发 


当 media TRHY duration 属性 和 元 素 加 载 完成 
时 触发 ， 此 时 可 以 读 取 这 些 数 据 


onloadedmetadata JavaScript 代码 


onloadstart JavaScript 代码 | 当 开 始 查找 要 加 载 的 media 数据 时 触发 
onmousedown JavaScript 代码 | 当 元 素 处 于 焦点 状态 下 在 其 上 单 击 鼠 标 时 触发 该 事件 
onmousemove JavaScript 代码 | 当 鼠 标 指针 在 该 元 素 上 移动 时 触发 该 事件 
onmouseout JavaScript 代码 | 当 鼠 标 指针 离开 该 元 素 时 触发 该 事件 
onmouseover JavaScript 代码 | 当 鼠 标 指针 进入 该 元 素 时 触发 该 事件 
Tie 当 元 素 处 于 焦点 状态 下 在 其 上 释放 鼠标 按键 时 
onmouseup JavaScript 代码 触发 该 事件 
ER JavaScript 代码 当 元素 处 于 焦点 状态 下 在 其 上 滚动 风 标 滚轮 时 
触发 该 事件 
onpause JavaScript 代码 | 当 视频 或 音频 终止 播放 时 触发 
onplay JavaScript 代码 | 当 调用 playO 方法 开始 播放 时 触发 
onpalying JavaScript 代码 | 当 视频 或 音频 已 经 正在 播放 时 触发 
onprogress JavaScript 代码 | 当 浏览 器 正在 从 服务 器 接收 数据 时 触发 


onratechange JavaScript 代码 | 当 media 数据 的 播放 速率 改变 时 触发 
onreadystatechange JavaScript 代码 | 当 元 素 的 准备 状态 发 生变 化 时 触发 该 事件 


onreset JavaScript 代码 | 当 表 单 被 重 置 时 触发 


onscroll JavaScript 代码 | 当 用 户 滚动 该 元 素 内 容 时 触发 该 事件 


当 media 元 素 的 seeking 属性 不 再 为 真 且 定位 
已 结束 时 触发 


onseeked JavaScript 代码 


当 media 元 素 的 seeking 属性 为 真 且 定位 已 开始 


onseeking JavaScript 代码 时 触发 


onselect JavaScript 代码 | 当 元 素 被 选 定时 触发 
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( 续 表 ) 
属性 值 J 述 
onshow JavaScript 代码 | 当 menu 元 素 被 显示 为 上 下 文 菜单 时 触发 
onstalled JavaScript 代码 | 当 取 回 media 数据 过 程 中 存在 错误 时 触发 
onsubmit JavaScript 代码 | 当 数 据 被 提交 时 触发 
网 当 已 经 在 获取 media 数据 ， 但 在 取 回 整个 
onsuspend JavaScript 代码 media 数据 之 前 中 止 时 触发 
ontimeupdate JavaScript 代码 | 当 media 改变 其 播放 位 置 时 触发 
onvolumechange JavaScript 代码 | 当 media 改变 音量 或 当 音量 设置 为 静音 时 触发 
onwaiting JavaScript 代码 | 当 media 已 停止 播放 但 仍 需要 继续 播放 时 触发 
时 事件 属性 可 以 应 用 于 所 有 元 素 ， 所 以 也 可 称 为 全 局 属性 ， 但 是 属性 并 不 


一 定 会 发 生 作用 ， 只 有 在 相应 的 元 素 应 用 相关 属性 才 会 触发 事件 。 


大 实例 04+ 视频 : 使 用 事件 属性 的 方法 


puit 
oe. së. pe-nn. 
nre 


mamana. 
mizana. 


AAD SEN SEM SAD ms wa SRO Nao mw sen0 


CEE aa TT ng EEE 
F — 


[本 六 执行 “文件 > 打开” 命令， 将 “ 源 文 件 \ 第 1 Ë A1-l-A html” 文档 打开 。 在 代码 视 
图 中 的 <span> 标签 中 添加 onMouseMove 事件 属性 ， 该 属性 表示 当 鼠 标 移动 到 <span> 标 
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签 上 时 ，<span> 标签 中 的 内 容颜 色 变换 为 #FF00FF. 


m- 2 z m - w 


[ 02 P| 继 续 添加 onMouseOut 事件 属性 ， 该 属性 表示 当 鼠 标 移动 出 <span> 标签 时 ，<span> 
标签 中 的 内 容 将 会 变换 为 #909090。 执行 “文件 > 另存 为 ”命令 , 将 文档 保存 为 “ 源 文件 \ 第 
1 章 \1-1-5.html”， 按 Fl2 键 测试 页 面 。 


Q & sa 标签 元 素 中 的 属性 都 必须 要 使 用 引号 引起 来 吗 ? 
多 S: 在 HTML 文档 的 书写 或 编辑 过 程 中 ， 所 有 的 属性 都 必须 要 使 用 双 
引号 引起 来 ， 如 果 用 户 将 引号 去 除 ， 在 完成 后 的 解析 过 程 中 ， 浏 览 器 将 会 在 
属性 的 位 置 中 断 ， 这 将 会 造成 页 面 无 法 正常 显示 。 


RR HTML 注释 标签 


注释 标签 用 于 在 代码 标签 中 添加 注释 ， 注 释 在 浏览 中 会 被 浏览 器 忽略 ， 所 以 用 户 在 制 
作 页面 时 ,可 以 使 用 注释 对 代码 进行 解释 ,这 样 有 助 于 用 户 再 次 对 代码 进行 修改 与 编辑 时 ， 
方便 地 知道 代码 的 含义 。 

<!-- 这 是 一 段 代码 的 注释 标签 --> 


@ 有 一 些 浏览 器 对 某 些 脚本 支持 的 并 不 是 非常 好 ， 为 了 避免 那些 不 支持 
JavaScr ipt 的 浏览 器 会 把 脚本 显示 为 页 面 的 普通 纯 文 本 ， 用 户 可 以 将 这 些 
JavaScript 的 脚本 语言 放置 到 注释 标签 中 。 


(mD SBI 05+ 视频 : 为 标签 添加 注释 | 


TEMIE88. SIMM. PATHEE. 
FETARE, NAR. 
钴 和 莫 攻 栏 ， 无 限 江 山 ， 别 时 容易 见 时 难 .。 
AAEE, REAN. 
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f 源 文件 : 源 文件 \ 第 1 章 \-1-6.html A 操作 视频 : 视频 \ 第 1 章 \1-1-6. swf 


区 5 对 HTML 5 > 网 页 制作 > 全 程 揭秘 


<body> 
<header>. 该 标签 是 页 面 
<h1> 古 闻 和 
</header> 
<h2> 浪 淘 沙 </h2> 
<ul> 
<1i><b> 南 唐 </b></1i> 
<1i><b> 李 煜 </b></1i> 
</ul> 
<P AAR SESAM ， 罗 会 不 耐 五 更 寒 。<1 
<PEETMS E ARR. </p> 
<DRBRAÈ, ARIU: 别 时 容易 见 时 淮 。 <] 


[01 PJBU XTR AG, i RASE 1 章 \11601.html” 文 档 打 开 。 在 代码 视图 
中 为 <header> 标签 添加 注释 标签 。 


<he 
ADARA., [nizet ; euma 
</header> mEt iF 古 词 欣赏 
<h2> 澳 淹 沙 chz> 浪 淘 沙 
<ul»: -HEE 开 


ÑA NB /oyc/1i: pR Ë m 
Eeoae 


winan. CEAR. SATHERS, 


<PPRMNBBE, aema, Farunmm. <p> w 


[02 站 使 用 相同 的 方法 为 其 他 的 标签 添加 注释 标签 。 执行“ 文件 二 另存 为 ”命令 ， 将 文档 保 
存 为 “ 源 文件 \ 第 1 章 \1-1-6.html”， 按 F12 键 测 试 页 面 ， 可 以 看 到 注释 内 容 并 不 会 显示 。 


提问 : 可 以 在 注释 标签 中 添加 空格 吗 ? 

答 : 注释 标签 的 开始 标签 <! 和 -- 之 间 不 能 包含 空格 ， 因 为 这 会 使 注释 
标签 失去 意义 ， 但 是 在 结束 标签 -- 和 > 之 间 可 以 包含 空格 。 另 外 用 户 在 定义 
注释 时 ， 要 尽量 避免 两 个 相连 的 连 字 符 (例如 --) 。 


1.2 HTML 5 5 HTML 4 的 区 别 


HTML 5 以 HTML 4 为 基础 ， 对 HTML 4 进行 了 大 量 的 修改 。 本 节 将 会 从 总 体 上 介绍 
HTML 5 对 HTML 4 进行 了 哪些 修改 ，HTML 5 与 HTML 4 之 间 比 较 大 的 区 别 是 什么 。 


PA HTML 5 的 语法 变化 
HTML 5 中 的 语法 变化 ， 与 其 他 开发 语言 中 的 语法 变化 有 所 不 同 。 它 的 变化 是 因为 在 
HTML 5 之 前 几乎 没有 符合 标准 规范 的 Web 浏览 器 。 
HTML 的 语法 是 在 SGML (Standard Generalized Markup Language) 语言 的 基础 上 建 
立 起 来 的 。 但 是 SGML 语法 非常 复杂 ， 要 开发 能 够 解析 SGML 语法 的 程序 很 不 容易 ， 所 以 


很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 虽 然 HTML 基本 上 遵从 SGML 的 语法 ， 但 
是 对 于 HTML 的 执行 在 各 浏览 器 之 间 并 没有 一 个 统一 的 标准 。 


HTML 5 中 的 标记 方法 | 
首先 用 户 需要 了 解 在 HTML 5 中 的 标记 方法 。 


EE 
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Ə 内 容 类 型 (ContentType) 

首先 ，HTML 5 的 文件 扩展 符 与 内 容 类 型 保持 不 变 。 也 就 是 说 ， 扩 展 符 仍 然 为 “.html” 
或 “htm”， 内 容 类 型 (ContentType) 仍然 为 “text/html”。 
@ DOCTYPE 声明 

DOCTYPE 声明 是 HTML 文件 中 必 不 可 少 的 ， 它 位 于 文件 第 一 行 。 在 HIML 4H, = 
的 声明 方法 如 下 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> 

# HTML 5 中 ， 可 以 不 使 用 版 本 声明 ， 一 份 文档 将 会 适用 于 所 有 版 本 的 HTML, 
HTML 5 中 的 DOCTYPE 声明 方法 (不 区 分 大 小 写 ) 如 下 : 


<! DOCTYPE html> 

另外 当 使 用 工具 时 ， 也 可 以 在 DOCTYPE 声明 方式 中 加 入 SYSTEM 识别 符 ， 声 明 方 
法 如 下 面 的 代码 所 示 : 

<! DOCTYPE HTML SYSTEM "about: legacy-compat"> 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!doctype html> 
Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd"> <he 
TREE <head> 
<head> <meta charset="utf-8"> 


<meta http-equiv="Content-Type" content= <title> 无 标题 文档 </titley 
"text/html; charset=utf-8"> 

<title> 无 标题 文档 </title> </head> 

</head> 

<body> 

<body> 

Oi </body> 

</html> </html> 


HTML 4 的 DOCTYPE 声明 HTML 5 的 DOCTYPE 声明 
(1.3 HTML 5 新 增 元 素 和 废除 元 素 | 


在 HIML 5 中 ， 为 了 使 文档 结构 更 加 清晰 ， 便 于 阅读 ， 增 加 了 很 多 元 素 ， 也 废除 了 一 
些 元 素 ， 接 下 来 我 们 对 这 些 元 素 进 行 简单 介绍 。 


I 医 马 阐 新 增 的 结构 元 素 


在 HIML 5 的 新 特性 中 ， 新 增 了 许多 的 结构 元 素 ， 合 理 地 使 用 这 种 结构 元 素 ， 可 以 非 
常 方便 地 制作 出 一 些 网 页 效果 ， 并 且 也 将 极 大 地 提高 用 户 在 制作 页 面 时 的 工作 效率 。 


TR HTML 5 HTML 4 元 素 效果 


section 元 素 表示 页 面 中 的 一 个 内 容 模 
块 ， 例 如 章节 、 页 眉 、 页 脚 或 页 面 中 


<section>--- 
Beet | <div>.…</div> | 的 其 他 部 分 。 它 可 以 与 hl、h2、13、 
</section> _ 
h4. h5. h6 等 元 素 结合 起 来 使 用 ， 表 
示 文 档 结构 
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( 续 表 ) 


元 R HTML 5 HTML4 元 素 效果 


article 元 素 表示 页 面 中 的 一 块 与 上 
article <article>…</article> <div>…</div> | 下 文 不 相关 的 独立 内 容 ， 例 如 博客 
中 的 一 篇 文章 或 报纸 中 的 一 篇 文章 


aside 元 素 表示 article 元 素 的 内 容 之 外 的 、 
与 article 元 素 的 内 容 相关 的 辅助 信息 


aside <aside>--:</aside> <div>…</div> 


header 元 素 表 示 页 面 中 一 个 内 容 区 
块 或 整个 页 面 的 标题 


header <header>…</header> | <div>…</div> 


hgroup 元 素 用 于 对 整个 页 面 或 页 面 
中 一 个 内 容 区 块 的 标题 进行 组 合 


footer 元 素 表示 整个 页 面 或 页 面 中 
一 个 内 容 区 块 的 脚注 。 一 般 来 说 ， 
它 会 包含 创作 者 的 姓名 、 创 造 日 期 
以 及 创作 者 的 联系 信息 


hgroup | <hgroup>…</hgroup> | <div>…</div> 


footer <footer>…</footer> <div>…</div> 


nav <nav>…</nav> <div>…</div> | nav 元 素 表示 页 面 中 导航 链接 的 部 分 
<figure> <dl> = en ET 
ENE i _ figure 元 素 表示 一 段 独立 的 流 内 容 ， 
<figcaption> 标题 <hl> 标题 E gy = w, 
figure </figcaption> </h1> 一 般 表 未 文 档 主 体 流 内 容 中 的 = 
g ` esp, ~ ARS 独立 单元 。 使 用 figcaption 元 素 为 
p P P P” | figure 元 素 组 添加 标题 
</figure> </dl> 


m 实例 06+ 视频 : 使 用 新 增 结构 元 素 制作 页 面 


f 源 文件 : 源 文件 \ 第 1 章 \1-3-1.html A 操作 视频 : 视频 \ 第 1 章 \1-3-1. swf 
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qusa t === 


<title> 新 增 结 构 元 素 </title> 
</head> 


<body> 
<header> 


<6l> 枉 此 名 句 </hl1> 


</header> 


[ol 执行 “文件 > 新 建 ” 命令 ， 新 建 一 个 空 白 的 HTML 5 文档 。 输 入 文档 的 标题 ， 并 在 
<body> 标签 中 添加 其 他 的 标签 和 文字 。 


amp <REF RAP RAR- i, 

ses <> TERR. AJKA! 

PARSEE, PERI (Esame. ur 
BRAKZ. FEHR </p> 


ArDyca href="herp://baiks. baidu. com/view/26085.htn">I®š$ A</a>c/h2> 
<nav> 
<ul> 

<11><a nrer=e"nttp://Da1ke.Daidu.com/view/37438.ntm"> M </a></11> 

<11><a nrer="nttp://Da1xe.Daidu.com/view/2311.ntm">Fif</a></11> 


Q manna, waaar» ye 
<> ER, Ç+ B a? Ç, 
RERAMA, TOBREF SBTUR- ¿o> 
RERAN. ARTAR? </p> 

RRE, EMA MTN ¿c> 

PTER, AFENAKE? </> 

Sa aE ANERER. KENA: ahs 
PAEA, FARMIN 


</sectiony 


OSRE <body> 标签 中 添加 <section> 标签 、<article> 标签 、<nav> 标签 以 及 标签 中 
的 内 容 。 


<p> 春 花 秋月 何 时 了 ? 往事 知 多 少 。</p> Per — 
<p> 小 楼 昨夜 又 东风 ， 故 国 不 堪 回 首 月 明 中 。</P> mtz 
<p> 雕 栏 玉 砌 应 犹 在 ， 只 是 抄 颜 改 。</p> 
<p> 问 君 能 有 几 多 的? 恰似 一 江 春水 向 东 流 。</p> 
</article> 
</section> 
<footer> 
<p>@ 2013 Dreamweaver</p> 
</footer> 
</body> 
</html> 


CO3 > 继续 添加 <footer> 脚注 标签 以 及 脚注 中 的 内 容 。 将 文档 保存 为 “ 源 文件 \ 第 1 章 \ 
1-3-1.html”， 按 F12 键 测试 页 面 。 


? Ky 提问 : 这 些 新 增 的 元 素 都 可 以 使 用 DIV 代替 ， 为 什么 还 要 增加 呢 ? 
EJ 答 : 这 些 新 增 的 结构 元 素 主要 功能 就 是 解决 之 前 在 HTML 4 中 DIV 过 
多 的 情况 ， 使 网 页 内 容 更 加 具有 语义 性 ， 强 调 HTML 的 语义 化 。 


| 医 束 疆 新 增 的 其 他 元 素 


除了 结构 元 素 外 ， 在 HTML 5 中 还 新 增 了 以 下 元 素 。 


T E HTML 5 HTML 4 元 素 效果 | 


<ruby><rt>…</rt> HIML 5 中 的 新 增 功 | tt 元 素 表示 字符 (中 文 注音 
</ruby> 能 ， 没 有 相对 应 功能 “| 或 字符 ) 的 解释 或 发 音 
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( 续 表 ) 
元 素 HTML 5 HTML4 元 素 效果 
<object 
. type="video/ogg" 
= Pea PE I 
ji ua w yei data="movie.ogv"> video 元 素 定义 视频 ， 例 如 电 
video controls="controls 
视频 —video> <param ameman " | 影片 段 或 其 他 视频 流 
value="movie. 
ogv"></object> 
<object 
type="application/ 
ogg" 
di <audio src="someaudio. | data="someaudio. audio 元 素 定 义 声 音 ， 例 如 音 
audio 
wav"> 音频 </audio> wav"><param 乐 或 其 他 音频 流 
name="sre" 
value="someaudio. 
wav"></object> 
元 素 主要 用 来 在 视觉 上 向 用 户 呈 
现 哪些 需要 突出 显示 或 高 亮 显示 
mark <mark>…</mark> <span>…</span> 的 文字 。mark 元 素 的 一 个 比较 典 
型 的 应 用 就 是 在 搜索 结果 中 向 用 
户 高 亮 显示 搜索 关键 词 


progress 元 素 表示 运行 中 的 进 


wav" /> 


x-shockwave- 


flash"></object> 


PE mer HIML 5 中 新 增 功能 ，| 程 。 可 以 使 用 progress 元 素来 
progress | 了 SPPE | 没有 相对 应 功能 显示 JavaScript 中 耗费 时 间 的 
函数 的 进程 
me 元 素 表示 度量 衡 。 仅 用 于 忆 
;中 新 增 功能 , AURATA, 必须 
meter <meter>…</meter> 没有 相对 应 功能 定义 度量 的 范围 ， 既 可 以 在 元 
| ° 素 的 文本 中 ， 也 可 以 在 minmax 
属性 中 定义 
<object 
“¿kaqa sg; data="flash.swf " 
embed Sonia e kasa type="application/ embed 元 素 定 义 插件 
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( 续 表 ) 
m% 3€ HTML 5 HTML 4 元 素 效果 
ruby 元 素 由 一 个 或 多 个 字符 
(需要 一 个 解释 /发 音 ) 和 
' —uby><at—p>(<4p>`- HTML 5 中 新 增 功能 ，| 一 个 提供 该 信息 的 rt 元 素 组 
PDY | pz)dip><he<inby> | 没有 相对 应 功能 成 ， 还 包括 可 选 的 tp TR, 
定义 当 浏览 器 不 支持 ruby 元 
素 时 显示 的 内 容 
ti <time>…</time> < >…</ > time 元 素 表示 日 期 或 时 间 ， 
1De 1me. 1me. span. span- 或 者 两 者 
<ruby><rt><rp> 5 中 新 增 功 能 rp TAT ruby 注释 中 使 用 ， 
rp (</rp>…<rp>) 没有 相对 应 功能 以 定义 不 支持 ruby 元 素 的 浏 
</rp></rt></ruby> š E 览 器 所 显示 的 内 容 


wbr 元 素 表示 软 换 行 。wbr 元 
素 与 br 元 素 的 区 别 是 ，br 元 
素 是 此 处 必须 换行 ; 而 wbr 


<p> to learn ajax.you 元 素 意 思 就 是 浏览 器 窗口 或 
must be fami<wbr>liar HTML 5 中 新 增 功能 ， FA na maj 
wbr with the XML 没有 相对 应 功能 ( 没 必要 换行 时 ) ， 不 进行 
http<wbr>Request 换行 ， 而 当 宽 度 不 够 时 ， 主 
Object.</p> 动 在 此 处 进行 换行 。wbr 元 
素 好 像 对 字符 型 的 语言 用 处 
EK, 但 是 对 于 中 文 这 种 字 ， 
没 多 大 用 处 
<object qata hiq canvas 元 素 表示 图 形 ， 例 如 
<canvas hdr.svg" i pi 人 个 =a 
id="myCanvas" type="image/ jia 素 是 为 了 客户 A am i 
canvas width="200" svg+xml" MEHN. ie ni 
height="200"> width="200" Nu EAS 
</canvas> height="200"> EPR vasene, MEA 
prei 能 够 把 想 绘制 的 东西 都 绘制 
到 一 块 画布 上 
f f I HIML 5 中 新 增 功能 ， ueq TAPETEN 
datalist <datalist>---</datalist> 没有 相对 应 功能 表 。 与 iput 元 素 配合 使 用 ， 就 可 
以 制作 出 输入 值 的 下 拉 列 表 
keygen <keygen> hee keygen 元 素 表 示 生 成 密 钥 


蕊 5 对 HTvL 5 > 网 页 制作 > 全 程 揭秘 ] 
( 续 表 ) 
元 素 HTML 5 HTML 4 元 素 效果 
details 元 素 表示 用 户 要 求 得 到 
z 并 且 可 以 得 到 的 细节 信息 。 它 
a E HIML 5 中 新 增 功能 ，| 可 以 与 summary 元 素 配合 使 
aA Y | 没有 相对 应 功能 用 。summary 元 素 提 供 标题 或 
图 例 。 标 题 是 可 见 的 ， 用 户 点 
击 标题 时 ， 会 显示 出 details 
. ! . HIML 5 中 新 增 功 能 ，| datagrid 元 素 表示 可 选 数据 的 列 
d: rid datagrid>-:-</datagrid: 
aasid “8896989 | 没有 相对 应 功能 。 | 表 。datagrid 作为 树 列表 来 显示 
source 元 素 为 媒介 元 素 (BI 
source <source> <param> 如 <video> 和 <audio>) ， 定 
义 媒介 资源 
<menu><li> <input 
type="checkbox" 
/>red</li> menu 元 素 不 被 推荐 | menu 元 素 表示 菜单 列表 。 当 希 
me | —i><input 使 用 望 列 出 表单 控件 时 使 用 该 标签 
type="checkbox" 
/>blue</li></menu> 
output <output>…</output> <span>…</span> output 元 素 定义 不 同类 型 的 
P Š P P i 输出 ， 例 如 脚本 的 输出 
N aca HIML 5 中 新 增 功能 ，| command 元 素 表 示 命令 按钮 
—— 5 没有 相对 应 功能 例如 单 选 按钮 、 复 选 杠 或 按钮 
label="cut"> 
s> 实例 07+ 视频 : 使 用 新 增 的 音 AE UN 音乐 


== 


s eeso- mx + | 


f 源 文件 : 源 文件 \ 第 1 章 \1-3-2.html 


A 操作 视频 : 视频 \ 第 1 章 \1-3- -3-2. suf 
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Cor wj 执行 “文件 > 新 是 命令 ， 新 建 一 个 空白 的 HTML 5 XË, 执行 “文件 > EF 命令 ， 
OORA “ 源 文件 \ 第 1 章 \1-3-2.html”。 


<meta charser="ucf. 
<title> 使 用 TEMERE </title> 


J </head> 


<body> 
EE <audio src="images/13201.mp3" controls> </audio> 


( 02 > fE <body> 标签 中 添加 文档 的 标题 和 <audio> AIRE, EE CtrliS， 将 文档 保 
存 ， 按 Fl2 键 测试 页 面 ， 单 击 播放 控件 的 “播放 ”按钮 ， 即 可 测试 音频 的 播放 效果 。 


II =a 可 以 调整 音频 播放 控件 的 大 小 吗 ? 
多 2: 播放 控件 的 大 小 是 可 以 调整 的 ， 其 中 控件 的 宽度 可 以 任意 调整 ， 但 
是 高 度 最 好 不 要 小 于 45px， 因 为 一 旦 小 于 45px， 就 会 使 控件 仅 显示 “播放 ” 
和 “暂停 ”两 个 按钮 


[民有 素 届 被 废除 的 元 素 


在 HIML 5 中 由 于 各 种 原因 ， 废 除了 很 多 元 素 ， 现 分 析 如 下 。 

x basefont, big. center, font. s. strike, tt u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯 
粹 为 画面 展示 所 服务 的 , 而 HTML 5 中 提倡 把 画面 展示 性 功能 放 在 CSS 样式 表 中 统一 编辑 ， 
所 以 在 HTML 5 中 将 这 些 元 素 废除 ， 使 用 编辑 CSS、 添 加 CSS 样式 表 的 方式 进行 替代 。 其 
中 font 元 素 允 许 由 所 见 即 所 得 的 编辑 器 来 进行 插入 ，s 元 素 和 strike 元 素 可 以 由 del 元 素 进 
行 替代 ，tt 元 素 可 以 由 CSS 的 font-family 属性 进行 替代 。 

对 于 frameset, frame 与 noframes 元 素 ， 由 于 frame 框架 对 网 页 可 用 性 存在 负面 影响 ， 
在 HTML 5 中 已 不 支持 frame 框架 ， 只 支持 iframe 框架 ， 或 者 用 服务 器 创建 的 由 多 个 页 面 
组 成 的 复合 页 面 的 形式 ， 同 时 将 这 3 个 元 素 废除 。 

对 于 applet、bgsound、blink、marquee 元 素 ， 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 ， 特 
别 是 bgsound 元 素 以 及 marquee 元 素 ， 只 被 Internet Explorer 所 支持 ， 所 以 在 HTML 5 中 
被 废除 。 其 中 applet 元 素 可 由 embed 元 素 或 object 元 素 进行 替代 ，bgsound 元 素 可 由 audio 
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元 素 进行 替代 ，marquee 可 以 由 JavaScript 编程 的 方式 所 替代 。 

对 于 rb 元 素 ， 由 于 ruby 元 素 的 存在 ，zmb 元 素 就 多 余 了 ， 所 以 也 被 废除 。 

其 他 被 废除 元 素 还 有 : 使 用 abbr TR acronym 元 素 ; 使 用 ul TRE dir 元 素 ; 
使 用 form TRS input 元 素 相 结 合 的 方式 替代 isindex 元 素 ; 使 用 pre TRH listing 元 素 ; 
使 用 code 元 素 替 代 xmp 元 素 ; 使 用 GUIDS 替代 nextid 元 素 ; 使 用 "text/plian"MIME 类 型 
替代 plaintext 元 素 。 


| 1.4 HTML 编写 方法 | 


HTML 的 编写 方法 有 两 种 ， 一 种 是 使 用 Windows 附件 中 的 “记事 本 ”进行 编写 ; 另 一 
种 是 在 Dreamweaver 中 编写 HTML 代码 。 


ESE 使 用 记事 本 编写 HTML | 


HTML 是 一 种 纯 文本 的 文档 ， 所 以 编写 HTML 文档 并 不 需要 任何 特殊 的 开发 环境 ， 可 
以 直接 在 Windows 自 带 的 记事 本 中 编写 。 


大 实例 08+ 视频 : 使 用 记事 本 创建 HTML 文档 


į am g B eina) 
ram T Ww. = 
€ + O @ > x[n] PRO:|E I 
动 夜 思 
床 前 明月 光 ， 
疑 是 地 上 霜 。 
FAAA, 
MADR a 
EE r 图-| 口 和 | 3 D- w+ e = —— 
f 源 文件 : 源 文件 \ 第 1 章 \1-4-1,html S) 操作 视频 : 视频 \ 第 1 章 \1-4-1. swf 
同 Windows 资源 管理 器 司 1-4-Lhml-iog 本 gaz] 
D == ZAA SRO WRO FEV AH 
<! html> . 
ai aa a 
=p head> 
计算 器 meta charset=“utf-8”/: 
Ë 记事 本 te> 唐 诗 一 首 </tide: 
a :/head> 
SALA <body> 
Es 连接 到 投影 仪 mr 
<p> 床 前 明月 光 . </p: | 
<p meh, 
tem aee 区 
画 命令 提示 符 LB B area p: I 
H 同步 中 心 sl 
=== ， 
W nesmes zugan | 


[ 01 JÉ Windows 操作 系统 中 , 单 击 “ 开 始 ″ 按钮， 选择“ 所 有 程序 > 附件 > 记事 本 ”命令 ， 
打开 “记事 本 ”程序 ， 输 入 以 上 HTML 代码 。 
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JEZ =i m = 二 b 
— +> ce es ao 加 PRD- |E 
3 nam 
| 床 前 明月 光 
fl FBL 


d 
np] - 
arsan RE Ë | 


dss „ba em —w 可 Sama To i + z; | - wx + | 
“记事 本 ”程序 中 选择 “文件 > 保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 将 文件 保存 为 
“1-4-1html”。 双 击 保存 好 的 文件 ， 在 浏览 器 页 面 浏览 效果 。 


Q &7 sa: 使 用 记事 本 编辑 HTNL 文档 需要 注意 哪些 事项 ? 

K 答 : 因为 HTML 是 纯 文 本 的 文档 ， 所 以 用 户 可 以 使 用 任何 的 文字 处 理 
软件 来 进行 HTML 文档 的 代码 编写 ， 但 是 必须 要 注意 ， 在 编辑 完成 后 ， 一 
定 要 使 用 html 的 扩展 名 对 文档 进行 保存 。 


EPA 使 用 Dreamweaver 编写 HTML 文档 
使 用 Dreamweaver 编写 HTML 文档 的 方法 也 非常 简单 ， 打 开 Dreamweaver 软件 后 ， 
执行 “文件 > 新 建 ”命令 ， 在 弹出 的 对 话 框 中 设置 一 下 各 项 的 参数 ， 单 击 “ 确 定 ” 按 钮 ， 
即 可 新 建 一 个 空白 的 HTML 文档 。 


1 messa O D l | 
元 素 和 属性 的 大 小 写 规范 
元 素 名 和 属性 都 是 不 需要 区 分 大 小 写 的， 例如 下 面 3 个 标签 的 效果 都 是 一 样 的 。 


<body> : : -</body> 

<BODY> : -</BODY> 

<BOdy> : -</BOdy> 

<boDY> : : -</boDY> 

虽然 标签 的 大 小 写 并 不 影响 标签 的 效果 ， 但 建议 用 户 在 书写 代码 时 都 使 用 小 写 ， 这 也 
是 未 来 HTML 发 展 的 方向 ， 例 如 HTML 4 规范 的 更 新 版 本 XHTML 就 规定 标签 和 属性 必须 


使 用 小 写 。 
虽然 元 素 和 属性 都 是 不 区 分 大 小 写 的 ， 但 是 有 些 属 性 值 还 是 区 分 大 小 写 的 ， 例 如 class 
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属性 和 id 属性 的 值 就 是 区 分 大 小 写 的 。 


@ 并 非 所 有 的 属性 值 都 是 区 分 大 小 写 的 ， 大 部 分 属性 的 值 并 不 需要 区 分 大 
小 写 ， 但 还 是 建议 用 户 在 书写 代码 时 认真 描述 属性 值 ， 以 免 发 生 一 些 不 必要 
的 麻烦 。 


144 断 行 符 与 空白 字符 


É HTML 文档 中 有 时 候 可 能 需要 包含 一 些 空白 ， 每 个 空白 都 对 应 着 一 个 空白 字符 ， 这 
些 空白 对 于 排版 是 非常 重要 的 。 例 如 ， 英 文 单词 就 必须 使 用 空白 隔 开 。 
@ 断 行 符 

断 行 符 表示 一 行 的 结束 ， 它 也 是 空白 字符 ， 虽 然 在 HTML 源 文 档 中 看 不 到 这 些 字 符 
SGML 规定 ， 紧 跟 在 一 个 开始 标签 之 后 的 断 行 符 会 被 忽略 ， 同 时 一 个 结束 标签 之 前 的 断 行 
符 也 将 被 忽略 ， 这 个 规定 也 适用 于 HTML， 例 如 下 面 的 代码 : 

<p> 

这 里 的 断 行 符 会 被 忽略 。 

</p> 

紧 跟 在 <p> 之 后 的 一 个 断 行 符 ， 在 </p> 之 前 也 是 一 个 断 行 符 ， 但 是 这 些 断 行 符 都 会 
因为 SGML 规定 而 被 忽略 ， 最 终 会 被 解释 为 下 面 所 示 的 代码 : 

<p> 这 里 的 断 行 符 会 被 忽略 。</p> 


Ə 空白 字符 

Æ HTML 文档 中 ， 将 以 下 4 种 字符 归 为 空白 字符 : 

ASCIIFH (&#x0020;) 

RSCII 制 表 符 (&#x0009;) 

RSCII 换 页 (&#x000C; ) 

零 宽 空 白 (&#x200B; ) 

不 同 的 文字 书写 语言 在 对 空白 区 域 的 处 理 上 是 不 同 的 ， 因 此 应 该 定义 一 个 约定 来 说 明 
怎么 处 理 空白 ， 浏 览 器 也 应 当 根据 约定 呈现 空白 区 域 。 例 如 ， 对 于 拉丁 语文 字 ， 词 与 词 之 
间 的 空白 就 是 一 个 ASCII 空白 ; 泰语 中 的 空白 就 是 零 宽 空白 的 单词 分 隔 符 ; 而 在 日 语 和 汉 
语 中 ， 字 与 字 之 间 的 空白 完全 被 忽略 。 


1.5 预览 测试 HTML 页 面 


在 页 面 设计 完成 或 者 编辑 完成 某 一 部 分 后 ， 设 计 者 大 多 都 会 对 页 面 进行 预览 测试 ， 观 
察 页 面 在 浏览 器 中 的 实际 效果 是 否 出 现 偏差 ， 以 便 及 时 发 现 与 修改 。 


151 查看 页 面 效果 


如 果 用 户 是 在 Dreamweaver 中 制作 页 面 ， 在 需要 测试 的 时 候 ， 按 F12 键 即 可 打开 浏览 
器 对 页 面 进行 测试 ， 单 击 “ 在 浏览 器 中 浏览 /调试 ”按钮 ， 也 可 以 对 页 面 进行 测试 ; 如 果 
用 户 是 在 普通 的 文本 软件 中 编辑 页 面 ， 测 试 页 面 时 需要 将 文档 保存 为 HTML 文件 ， 双 击 即 
可 将 文档 打开 到 浏览 器 中 。 
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制作 网 页 除了 需要 用 户 自 己 的 灵感 ， 有 时 候 也 需要 借鉴 前 人 的 经 验 与 宝贵 的 资源 ， 经 
常 借鉴 别人 的 作品 来 丰富 自己 的 知识 库 是 一 种 十 分 好 的 方法 ， 当 然 借鉴 别人 的 作品 就 需要 
查看 页 面 源 代 码 。 

查看 网 页 源 代 码 的 方法 非常 简单 ， 使 用 正 浏 览 器 打开 需要 查看 的 网 页 ， 使 用 鼠标 
在 空白 的 位 置 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “查看 源 文件 ”命令 。 用 户 在 
“页 面 > 查看 源 文件 ”命令 ， 也 可 以 打开 网 页 的 源 代 码 。 


LE 一 


== (z 


时 通过 查看 网 页 的 源 代 码 ， 可 以 使 用 户 清楚 地 查看 网 页 的 整体 结构 和 使 用 
的 标签 属性 ， 帮 助 用户 对 其 进行 借鉴 与 学 习 。 


1.6 本 章 小 结 


本 章 重点 介绍 了 HTML 语言 的 基础 知识 ， 以 及 HTML 5 的 新 增 标 签 和 属性 ， 并 通过 几 
个 实例 向 用 户 介绍 了 HTML 的 强大 功能 。 


第 2 章 网 页 基本 HTML 标签 


一 个 完整 的 网 页 必须 包含 由 <html> 标签 、<head> 标 
签 和 <body> 标签 定义 的 3 个 部 分 组 成 ， 本 章 将 对 HTML 
的 基本 标签 进行 详细 讲解 。 


2.1 使 用 head 头 部 标签 


一 个 网 页 的 头 部 信息 虽然 不 会 通过 浏览 器 直接 看 到 ， 
但 对 于 正确 的 浏览 器 网 页 却 是 比较 重要 的 ， 它 可 以 包含 许 
多 信息 ， 例 如 版 权 声明 、 关 键 字 和 作者 信息 等 。 

HTML 的 头 部 元 素 以 <head> 为 开始 标签 ， 以 </head> 
为 结束 标签 ， 基 本 格式 如 下 : 


<head> 基 本 信息 </head> 
[V] TH body 主体 标签 在 HTML 文档 中 ，<head> 元 素 的 作用 范 
| gy 围 是 整个 文档 。 
| M 掌握 文字 的 设置 方法 
| V) 掌握 图 片 的 设置 方法 2 使 用 title 标题 标签 


使 用 过 浏览 器 的 人 可 能 都 会 注意 到 浏览 器 窗口 顶 冯 
[7] 掌握 列表 的 设置 方法 显示 的 文本 信息 ， 那 些 信 息 一 般 是 网 页 的 “标题 ”， 要 
将 网 页 的 标题 显示 到 浏览 器 的 顶部 其 实 很 简单 ， 只 要 在 
title>…</title> 标签 对 之 间 加 入 要 显示 的 文本 即 可 。 


v] 掌握 表格 的 设置 方法 


AECE E I D ELE 例如 : 
<title>---</title> 
在 标签 中 间 的 “…” 就 是 网 页 的 标题 文字 。 


网 页 的 标题 只 能 有 一 个 ， 它 位 于 HTML 文档 头 部 的 
<head> 标签 中 。 


实例 09+ 视频 : 定义 标题 


f 源 文件 : 源 文件 \ 第 2 章 \2-2. html 和 操作 视频 : 视频 \ 第 2 章 \2-2 swf 


第 2 章 网 页 基本 HTML 标签 M 
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(01 PHA “SEE >HTML” 命令 ， 新 建 一 个 空白 的 HTML 文档 。 单 击 窗口 左上 角 的 “代码 ” 
按钮 ， 将 新 建 的 空白 文档 调整 为 代码 视图 。 


<!doctype html> 3 
<html> EP rE] 
<head> 

<meta charset="utf-8"> 

<title> 欢 迎 学 习 HTML5</ticle> 

Tea 


<body> 
</body> 
</html> 


COZ 内在 代码 的 <title> -</title> 标签 对 中 输入 网 页 标题 。 还 可 以 直接 在 文档 工具 栏 上 的 “ 标 
题 ”文本 框 中 输入 网 页 标题 。 保 存 文档 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 ， 可 以 在 窗口 的 
左上 角 看 到 网 页 标题。 


提问 : 除了 上 面 介绍 的 两 种 修改 网 页 标题 方法 以 外 还 有 别 的 方法 吗 ? 
答 : 可 以 在 文档 中 执行 “修改 > 页 面 属性 ”命令 ， 弹 出 “页 面 属性 ”对 
话 框 ， 切 换 到 “标题 / 编码 ”选项 ， 在 “标题 ”文本 框 中 输入 网 页 标题 。 


2.3 使 用 meta 标签 


meta 即 元 数据 ， 可 以 用 来 描述 HTML 文档 信息 ，meta 元 素 必 须 位 于 <head>…</head> 标签 
对 内 部 。meta 元 素 有 两 个 属性 ， 分 别 是 name 和 http-equiv。 


° 在 一 个 HTML 文档 中 ， 可 以 有 多 个 meta 元 素 ， 而 且 meta 标签 没有 结束 
标签 ， 在 一 个 尖 括号 中 的 内 容 就 是 一 个 meta 内 容 。 


231 设置 页 面 关键 字 
将 meta 元 素 的 name 属性 的 属性 值 设置 为 Keywords， 即 可 向 搜索 引擎 说 明 网 页 的 关 
键 字 ， 关 键 字 可 以 协助 互联 网 上 的 搜索 引擎 查找 网 页 ， 只 要 网 页 中 包含 该 关键 字 ， 就 可 以 
在 搜索 结果 中 找到 ， 基 本 格式 如 下 : 


<meta name="keywords" content=" 具 体 关键 字 "> 


© 5 > 网 页 制作 > 全 程 揭秘 


m 实 例 10+ 视频 : 定义 搜索 引擎 关键 字 


Dw m o š 


==. | mummmamam[= Sl x | 
PPT emo eco sas som eem 


Aati ma G C e EE 


DRE: 视频 \ 第 2 章 \2-3-1. swf 


打开 (O) Ctrl+O 


在 Bridge 中 浏览 (B)… Ctrl +Alt+O 

打开 最 近 的 文件 (T) » 

在 框架 中 打开 (F).… Ctrl+Shift+O 

AO Ctri+Ww | cams ma 


01 PP 打开 Adobe Dreamweaver CS6 软件 ,执行 “文件 > 新建” 命令 ,在 弹出 的 “新 建文 档 ” 


对 话 框 中 设置 “页 面 类 型 ”为 HTML， “文档 类 型 ”为 HTML 5， 单 击 “ 创 建 ” 按 钮 ， 创 
建 一 个 HTML 5 文档 。 


在 HTML 5 文档 中 ，<head>…</head> 标签 对 之 间 的 内 容 不 会 在 浏览 器 窗 


口中 显示 出 来 ， 只 是 用 来 描述 HTML 文档 的 相关 信息 。 


<!doctype html> 
<html> 
< 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

</body> 

</html> 


a 
和 33 


[ 02 _pj 单 击 “ 代 码 ” 按 钮 ， 显 示 代 码 视图 ， 在 代码 视图 窗口 中 输入 人 代码， 执行“ 文件 > RE 
命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 将 文档 保存 为 “ 源 文件 \ 第 2 章 \,2-3-1.html”， 完 成 实 
例 的 制作 。 因 为 本 实例 编辑 的 内 容 为 后 台 程 序 ， 所 以 并 没有 浏览 效果 。 


提问 : 定义 关键 字 的 要 求 是 什么 ? 
答 : 在 定义 搜索 引擎 关键 字 的 过 程 中 ， 需 要 注意 content 属性 的 属性 值 
一 般 书写 15 个 关键 字 左 右 ， 关 键 字 之 间 使 用 英文 逗号 进行 分 隔 。 
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在 HIML 中 还 可 以 设置 页 面 说 明 ， 这 样 当 搜索 引擎 搜索 到 该 页 面 时 ， 就 能 够 在 搜索 结 
果 页 面 中 显示 该 页 面 说 明 。 

将 meta 元 素 的 name 属性 的 属性 值 设置 为 Description， 即 可 对 文档 进行 一 个 概要 描述 ， 
更 加 便于 搜索 引擎 的 查找 ， 语 法 格式 如 下 : 


<meta name="Description" content=" 具 体 描述 "> 


EK 光滑 定义 编辑 工具 


将 meta 元 素 的 name 属性 的 属性 值 设 置 为 Generator， 即 可 表示 创建 该 网 页 所 使 用 的 
工具 ， 语 法 格式 如 下 : 


<meta name="Generator" content="Dreamweaver"> 


EX 天 负 | 定义 作者 信息 
将 meta 元 素 的 name 属性 的 属性 值 设置 为 Author， 即 可 说 明 制 作 该 网 页 的 作者 ， 语 法 
格式 如 下 : 


<meta name="Author" content="Jack"> 


m 实例 11+ 视频 : 定义 作者 


[Dw me o ar = = 
ER) aen enw wam 


Taaa TIR GML s 


DHJDIE FYE i| 


ep LIIE Wieda Or 
=== 


f 源 文件 : 源 文 件 \ 第 2 章 \2-3-4 html 


编辑 (E) EEV) 插入 (1】 修改 (M) 


n.. 

IF (0)... Ctrl+O 

在 Bridge 中 浏览 (B)… Ctrl+AH+O 

打开 最 近 的 文件 (T) 上 

在 框架 中 打开 (有 Ctrl+Shift+O 

关闭 (QO Ctrl+W B asas 


L01 Pj 打开 Adobe Dreamweaver CS6 软件 , 执行 “文件 > 新 建 ” 命令 ， 在 弹出 的 “新 建文 档 ” 
对 话 框 中 设置 “页 面 类 型 ”为 HTML，“ 文 档 类 型 ”为 HTML 5， 单 击 “ 创 建 ” 按 钮 ， 创 
建 一 个 HTML 5 文档 。 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 


<!doctype html> <!doctype html> 
<html> 
<html> prae 
<head> <meta charset="utf-8"> 
<meta charset="utf-8"> <meta name="Author" content="zhangsan" 
<title> 无 标题 文档 </title> <title> 定 义 作 省 c/tirle> 
</head> 
</head> 
<body> 
<body> </body> 
</html> 
</body> 
</html> 


[02 FP 单 击 “代码 ” 按 钮 ， 显 示 代码 视图 ， 选 择 <head>…</head> 标签 对 中 不 需要 的 代码 ， 
按 Delete 键 将 其 删除 ， 输 入 相应 的 代码 。 


关闭 (QO Ctrl+W 
全 部 关闭 (E) Ctrl+Shift+W 
另存 为 (A)... Ctrl+Shift+S 
保存 全 部 (L) 

保存 所 有 柜 关 文 件 (R) 

另存 为 模板 (M)… 

辐 复 至 上 次 的 保存 (R) 


[二 六 执行 “文件 > 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 " 
按钮 将 文档 保存 到 “第 2 章 2-3-4.html”， 完 成 实例 的 制作 ， 因 为 本 实例 编辑 的 内 容 为 后 
台 程序 ， 所 以 并 没有 浏览 效果 。 


提问 : 定义 作者 有 什么 用 处 ? 

答 : 目前 几乎 所 有 的 搜索 引擎 都 是 通过 自动 查找 meta 值 来 对 网 页 进行 
分 类 的 ， 并 以 此 判断 网 页 内 容 的 基础 ， 其 中 name 作者 信息 也 是 一 个 重要 的 
分 类 关键 词 。 


设置 网 页 内 容 类 型 和 字符 集 | 

在 HTML 中 ， 还 可 以 通过 mena TRHY http_equiv 属性 设置 语言 的 编码 方式 ， 以 便 设 
置 网 页 的 内 容 类 型 和 所 使 用 的 字符 集 ， 语 法 格式 如 下 : 

<meta http equiv="Content-Type" content="text/html;charset=" 字 符 集 类 型 "> 

字符 是 各 种 文字 和 符号 的 总 称 ， 包 括 各 国家 文字 、 标 点 符号 、 图 形 符号 、 数 字 等 。 字 符 
集 是 多 个 字符 的 集合 ， 字 符 集 种 类 较 多 ， 每 个 字符 集 包含 的 字符 个 数 不 同 ， 常 见 字符 集 名 称 
有 ASCI 字符 集 、GB2312 字符 集 、BIG5 字符 集 、GB18030 字符 集 以 及 Unicode 字符 集 等 。 


@ 计算 机 要 准确 处 理 各 种 字符 集 文字 ， 需 要 进行 字符 编码 ， 以 便 计 算 机 能 够 
识别 和 存储 各 种 文字 。 中 文 文字 数目 大 ， 而 且 还 分 为 简体 中 文 和 繁体 中 文 两 种 
不 同 书写 规则 的 文字 ,因此 对 中 文字 符 进 行 编码 ， 是 中 文 信息 交流 的 技术 基础 。 
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py 六 浊 设置 网 页 跳 转 效果 


在 HTML 中 ， 当 http-equiv 属性 的 值 为 Refresh 时 ， 即 可 设置 网 页 定时 跳 转 效果 ， 基 
本 格式 如 下 : 


<meta http-equiv="Refresh" content="n; url=http://www.baidu.com"> 


sb ZH 12+ 视频 : 设置 网 页 定时 跳 转 | 


k... 


=== 


A 操作 视频 : 视频 \ 第 2 章 \2-3-6. swf 
== m 


打开 (O)… Ctrl+O 


在 Bridge 中 浏览 (B)… Ctrl+Ak+O 

打开 最 近 的 文件 (D) 

在 框 某 中 打开 (有 … Ctrl+Shif+O 

关闭 cdiw la m O O ca 


01 PP 打开 Adobe Dreamweaver CS6 软件 ， 执 行 “ 文 件 > 新 建 ”命令 ,在 弹出 的 “新 建文 档 ” 
对 话 框 中 设置 “页 面 类 型 ”为 HTML, “文档 类 型 ”为 HTML 5, 
Dw m. o s => DIS I (Cia Crype html> 


<head> 


[PPA sea me C 


"http-equive"Refresh" content="101] 
com": 
Ee/cicie> 


<body> 
</body> 
</html> 


02 >] 单 击 “ 创 建 ” 按 钮 ， 创 建 一 个 HTML 5 文档 ， 在 <meta> 标签 中 单 击 并 输入 ; http- 
equiv="Refresh" content="10; url=http://www.hao123.com/" 代码 。 


时 content 中 设置 的 刷新 时 间 和 链接 地 址 之 间 使 用 分 号 隔 开 , 默认 情况 下 ， 
跳 转 时 间 以 秒 为 单位 。 


© OID J 


二 — =. — — — L=. 
<cirle>xi2 bdrEBjBiisk ci Clam “asi 


[ 03 pJ <title> 标签 中 设置 文档 标题 为 “设置 网 页 定时 跳 转 ”， 执 行 “ 文 件 > 保存 ”命令 ， 
将 其 保存 为 “ 源 文件 \ 第 2 章 \2-3-6.html”。 


E eE o 
F 


: i b z 
[604 打开 “2-3-6.html” 所 在 的 文件 夹 ， 双 击 “2-3-6 html”， 在 浏览 器 中 打开 ，10 秒 后 
浏览 器 自动 跳 转 到 指定 的 网 页 中 。 


"IP 


提问 : 关于 Refresh 属性 的 说 明 是 什么 ? 
答 : 当 url 项 没有 定义 的 时 候 ， 那 么 浏览 器 就 会 刷新 本 页 ， 如 果 延 迟 时 
间 定 义 为 0， 浏览 器 就 会 在 完成 载 入 后 立即 刷新 本 页 。 


2.4 使 用 body 标签 定义 页 面 主体 


在 <head> 标签 之 后 就 是 <body> 标签 了 ， 该 标签 用 于 定义 网 页 的 主体 部 分 ， 也 就 是 要 
在 浏览 器 中 显示 处 理 的 所 有 信息 。 在 网 页 的 主体 标签 中 有 很 多 的 属性 设置 ， 包 括 网 页 的 背 
景 设置 、 文 字 属 性 设置 和 链接 设置 等 。 


使 用 bgcolor 定义 网 页 背景 色 | 


在 HTML 中 ， 可 以 使 用 bgcolor 属性 设置 整个 网 页 页 面 的 背景 颜色 ，bgcolor 的 值 可 以 
是 一 个 已 命名 的 颜色 ， 也 可 以 是 十 六 进 制 的 颜色 值 。 基 本 格式 如 下 : 


<body bgcolor="#FFFFFF"> 


ES o C 
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实例 13+ 视频 : 设置 背景 颜色 


f 源 文件 : 源 文件 \ 第 2 章 \2-4-1.html 


建议 名 布局 (PP).. 
打开 (O)... Ctrl+O 
Bridge 中 浏览 (B).… Ctrl+Alt+O 
打开 最 近 的 文件 (T) » 
在 框架 中 打开 (月 .… Ctrl+Shift+O 
关闭 (QO Ctrl+W sm CoE 


[67 打开 Adobe Dreamweaver 软件 ， 执 行 “文件 > 新 建 ， 命令， 在 弹出 的 “新 建文 档 
对 话 框 中 设置 “页 面 类 型 ”为 HTML, “文档 类 型 ”为 HTML 5。 


Dw m or i wn el | 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body bgcolor="#00FF66 中 
</body> 
</html> 


Te bl D kumi | 


02 | 单 击 对 话 框 中 的 “创建 ”按钮 ， 创 建 一 个 HIML 5 文档 ， 在 <body> 标签 中 单 击 并 
输入 bgcolor="#00FF66" 代码 。 


m= 
meo ¿s> 


C m - m - = @ - mp- am- 100-9- 


[03 PR “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 2 章 \2-4-1.html”， 双 击 打开 , 
在 浏览 器 中 查看 效果 。 


© HTv 5 > 网 页 制作 > 全 程 揭秘 ) 


? Q ET: 如 果 需 要 的 背景 色 是 白色 ， 是 不 是 就 不 需要 设置 背景 色 了 ? 
* 答 : 在 常用 的 一 些 浏览 器 中 ， 默 认 的 背景 色 都 是 白色 ， 但 是 也 有 一 些 低 
版 本 的 浏览 器 会 将 网 页 的 背景 色 默 认 显示 为 灰色 ， 所 以 为 了 增强 网 页 的 通用 


性 ， 建 议 用 户 对 背景 色 进行 设置 。 


2] 使 用 background 定义 网 页 背景 


在 HTML 中 ， 还 可 以 使 用 background 属性 将 图 片 设置 为 背景 ， 也 可 以 设置 图 片 的 平 
铺 方式 、 显 示 方式 等 。 基 本 格式 如 下 : 


<body background="images.jpg"> 


ca 14+ 视频 : EE 


f= 


IFO)... Ctrl+O 


在 Bridge 中 浏览 (B)... Ctrl+Ak+O 

打开 最 近 的 文件 (T) » 

在 框架 中 打开 (FP).… Ctrl+Shift+O 

关闭 (OQ) Ctrl+W 


01 | 打开 Dreamweaver 软件 ， 执 行 “ 文 件 > 新 建 ”命令 ， 在 弹出 的 RE 对 话 框 
中 设置 “页 面 类 型 ”为 HTML, 文档 类 型 为 HIML 5. 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body background="images/24201.jpg"> 
</body> 
</html> 


[ 02 > 单 击 对 话 框 中 的 “创建 ”按钮 ， 创 建 一 个 空白 的 HTML 5 文档 ， 在 <body> 标签 中 
为 该 标签 输入 background="images/24201.jpg" 代码 。 


EE C C 
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[03 P| 执 行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 2 章 \2-4-2.html” ， 双 击 打开 ， 
ç 


默认 情况 下 ， 背 景 图 像 会 在 水 平方 向 和 垂直 方向 上 不 断 重复 出 现 ， 直 到 
铺 满 整个 网 页 。 


? @ 


多 提问 : 在 设置 背景 图 像 的 过 程 中 需要 注意 什么 ? 
答 : 在 设置 背景 图 像 之 前 ， 需 要 将 即将 设置 为 背景 图 像 的 图 像 和 该 文档 
放置 在 同一 个 存储 路 径 中 。 否 则 网 页 上 传 到 互联 网 后 可 能 会 无 法 正常 显示 。 


243 使 用 text 定义 文字 颜色 


在 HTML 中 ， 可 以 通过 text 属性 来 设置 文字 的 颜色 ， 在 没有 对 文字 的 颜色 进行 单独 定 
义 时 ， 这 一 属性 可 以 对 页 面 中 所 有 的 文字 起 作用 。 基 本 格式 如 下 : 


<body text="#FFFFFF"> 


时 代码 中 的 #FFFFFF 就 是 对 文字 定义 的 颜色 值 ， 这 是 很 多 软件 都 支持 的 
十 六 进 制 颜色 码 。 


有 实例 15+ 视频 : 设置 文字 颜色 


. 1 maa = =i 


—— macm n i 1 


+e es w m--g 28. “| 到 


fBvestZEyrTne, 
b 


| 
a= 


f 源 文件 : 源 文件 \ 第 2 章 \2-4-3.html A 操作 视频 ， 视频 \ 第 2 章 \2-4-3 swf 


-| 


© OID ] 


SHA SRE EEV) EAN 修改 (M) 
新 建 流体 网 格 布局 (了 
打开 (O)... Ctrl+O 
在 Bridge 中 浏览 (B).… Ctrl+Alt+O 
打开 最 近 的 文件 () > 
在 框架 中 打开 (有.… Ctrl+Shif+O 
关闭 (O Ctrl+W = n C D a 


[01 打开 Adobe Dreamweaver CS6 软件 , 执行 “文件 > 新建 ”命令 ,在 弹出 的 “新 建文 档 ” 
对 话 框 中 设置 “页 面 类 型 ”为 HTML， “文档 类 型 ”为 HTML 5。 
aia <!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


body text="#00FF00"> 
Boay 
</html> 


312 


[ 02 >] 单 击 “ 创 建 ” 按钮 创建 一 个 HTML 5 文档 ， 在 <body> 标签 中 单 击 并 输入 相应 文 


字 和 代码 。 


(ms 
STID ¿mms 


[03 FP 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 2 章 \,2-4-3.html”， 双 击 打开 ， 
在 浏览 器 中 查看 效果 。 


提问 : 如 果 想 让 某 些 文字 显示 为 其 他 的 颜色 怎么 办 ? 

答 : 在 制作 网 页 时 ， 有 时 候 会 需要 页 面 的 某 一 部 分 文字 显示 为 其 他 的 颜色 ， 
这 时 候 ， 用 户 可 以 使 用 <font> 标签 或 者 <span> 标签 将 文字 单独 标记 起 来 ， 然 
后 对 该 部 分 文字 进行 单独 定义 ， 这 些 将 会 在 后 面 的 章节 中 为 用 户 详细 叙述 。 


”四 殉 级 使 用 link 实现 链接 


超 链接 是 网 页 中 最 重要 、 最 根本 的 元 素 之 一 。 网 站 中 的 一 个 个 网 页 是 通过 超 链接 的 形 


S o 
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式 关联 在 一 起 的 ， 正 是 因为 有 了 网 页 之 间 的 链接 ， 才 形成 了 这 纷繁 复杂 的 网 络 世界 。 超 链 
接 中 以 文字 链接 最 多 ， 用 户 可 以 通过 link 参数 修改 链接 文字 的 颜色 。 基 本 格式 如 下 : 
<body link="#FFFFFF"> 
使 用 alink 可 以 设置 正在 访问 的 文字 颜色 。 基 本 格式 如 下 : 
<body link="#FFFFFF" alink="#0066FF"> 
使 用 vlink 可 以 设置 访问 后 的 链接 文字 的 颜色 。 基 本 格式 如 下 : 


<body link="#FFFFFF" alink="#0066FF" vlink="#336600"> 


色 


mb 实例 16+ 视频 : 设置 链接 文本 的 


中 设置 


Ctrl+O 

在 Bridge 中 浏览 (B).… Ctri+Alt+0 

打开 最 近 的 文件 (T) » 

在 框架 中 打开 (有 .. ctrl+Shift+O 

关闭 (QO Ctrl+W a  — 

[01 Pp] 打 开 Dreamweaver 软件 ， 执 行 “ 文 件 > 新 建 ”命令 ， 在 弹出 的 “新 建文 档 

“页 面 类 型 ”为 HTML， “文档 类 型 ”为 HTML 5, 
Dw m o, 2: Or ANIE - -lel x 


02 > 
字 和 代 


+ FOE /OHIMLSNE NE KENE. 


CAE 


— 


m 


f 源 文件 : 源 文 件 \ 第 2 章 \2-4-4.html 


IF (O)... 


[Dw m+ o, a 


| 20 men sam mo mm “O sso eas eoo mmm 


a ET 
= w ee] 
= 本 
a | 
l ja 
h x SITES 
(e| ` 
# |° 
三 fe 
1 2 
fa 
区 
3 


对 话 框 


ECE 


单 击 “ 创 建 ”按钮 ， 创 建 一 个 HTML 5 文档 ， 在 <body> 标签 中 单 击 并 输入 相应 文 


码 。 


WojEHrur 5 > 网 页 制作 > 全 程 揭秘 


= = 
=== C w 
tseo» EEE =” 


EI TD 


[CE 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 TERO e. ETT, 
在 浏览 器 中 查看 效果 。 
个 
e 提问 : 为 什么 要 设置 超 链接 的 效果 ? 
2: 超 链 接 的 默认 效果 是 具有 下 划 线 的 蓝 色 文字 ， 这 又 可 能 和 用 户 所 需 
要 制作 的 页 面 效果 不 相符 合 ， 所 以 修改 超 链接 的 效果 是 非常 有 必要 的 。 


使 用 margin 定义 页 面 边 距 


在 网 页 中 可 以 设置 页 面 与 浏览 器 边框 之 间 的 距离 ， 包 括 上 边 距 和 左边 距 。 默 认 情 况 下 ， 
边 距 的 值 以 像素 为 单位 。 基 本 格式 如 下 : 


<body topmargin="100" leftmargin="100"> 


m KP 17+ 视频 : 定义 页 面 边 距 


f= 
* + @ e k w eb - g. == PAn: si 
sawan, 
amas. 
ae: 8 m- 92 e m D - w + k = 
f 源 文件 : i a wall A 操作 视频 : 视频 \ 第 2 章 \2-4-5. swf 
Dw m o, = m. K. ~ zJ <!doctype html> 
n cao o uss <hrm> 
<head> 


<meta charset="utf- 
<title> 无 标题 文档 </ti s 
</head> 


<body topmargin="100" 1eftmargin="100"> 
<p> 举 头 望 明月 ，</p> 

RABAS o ¿pi 

</body> 

</html> 


[91 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 HTML 5 文档 。 在 <body> 标签 中 单 击 并 输入 
相应 文字 和 代码 。 


EE C 
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TTA E Isam + 


Was ik。 
le 


wes 


， 双 击 打 开 ， 
在 浏览 器 中 查看 效果 。 


提问 : margin 边 距 在 实际 的 网 页 制作 中 有 什么 用 途 ? 
答 : 在 HTML 中 ， 页 面 在 默认 情况 下 是 具有 10px 的 边 距 效果 的 ， 这 就 


造成 在 页 面 的 顶部 总 是 会 出 现 一 点 空白 的 区 域 。 这 时 候 用 户 只 需要 在 body 
里 面 添加 topmargin="0" 或 者 margin="0" 即 可 。 


2.5 文字 与 段落 标签 | 


文字 是 网 页 设计 最 基础 的 部 分 ， 也 是 必 不 可 少 的 部 分 ， 它 们 可 以 使 页 面 更 加 丰满 。 文 
本 作为 最 能 表达 网 页 主题 的 代表 性 要 素 ， 在 网 页 制作 中 起 着 非常 重要 的 作用 。 在 网 页 中 添 
加 文字 并 不 困难 ， 主 要 问题 是 如 何 编排 这 些 文 字 ， 以 及 控制 这 些 文字 的 显示 方式 ， 让 文字 
看 上 去 编排 有 序 、 整 齐 美观 。 本 节 将 带领 用 户 对 文字 和 段落 的 编辑 方法 以 及 应 用 技巧 进行 
学 习 ， 使 读者 可 以 在 制作 网 站 页 面 的 过 程 中 更 加 全 面 地 应 用 段落 和 文字 元 素 。 


251 在 网 页 中 输入 文字 


用 户 可 以 直接 使 用 输入 法 在 网 页 编辑 窗口 中 输入 文本 ， 这 是 最 基本 的 输入 方式 ， 和 一 


些 文本 编辑 软件 的 使 用 方法 相同 。 同 时 用 户 也 可 以 从 Microsoft Word 和 Windows 记事 本 等 
软件 中 复制 出 文本 ， 然 后 直接 贴 入 Dreamweaver 中 。 


mD E) 18+ 视频 : 在 网 页 中 输入 文字 


_ 


1 eN — 图- D 由 | 号 四 - mx + | 


f 源 文件 : 源 文件 \ 第 2 章 \2-5-1.html 


A 操作 视频 : 视频 \ 第 2 章 \2-5-1. swf 
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=o EEEE 


CAE AROHA ap, 38 RENS 2 SE 25101 hl” 文件 打开 。 


<body> 
<div id="box"> 
<div id="wen"> 
<p></p> 
<p>MP3 是 一 种 音频 压缩 技术 ， 其 全 称 是 动 
态 影像 专家 压缩 标准 音频 层面 3 (Moving 
Picture Experts Group Audio Layer 
III)， 简 称 MP3。 </p> 
</div> 
</div> 
= 4 </body> 
Te] J w 8 TATE </html> 


[到 切换 到 拆 分 视 图 。 在 i id ZRA wen 的 <div> 标签 中 输入 相应 代码 和 文字 。 


[03 P| 执行 “文件 > 另存 为 ”命令 ,将 其 另存 为 “ 源 文件 \ 第 2 章 \2-5-1.html”， 按 F12 
键 在 浏览 器 中 预览 该 页 面 效 果 。 


提问 : 复制 具有 样式 的 文字 并 贴 入 Dreamweaver 中 样式 会 消失 吗 ? 

答 : 如 果 用 户 复制 的 文字 本 身 具 有 一 些 样式 , 在 贴 入 Dreamweaver 中 后 
这 些 样 式 仍然 会 保留 。 例 如 在 Word 中 复制 一 段 具 有 加 粗 效果 的 文字 ， 贴 入 
Dreamweaver 中 后 ， 会 自动 为 这 些 文字 加 上 <strong> 标签 。 


2.5.2 
HTML 文档 中 包含 有 各 种 级 别 的 标题 ， 各 种 级 别 的 标题 由 <hl> 到 <h6> 元 素来 定义 。 
其 中 <hl> 代表 最 高 级 别 的 标题 ， 依 次 递减 ，<h6> 级 别 最 低 。 
@ 标题 字 标 签 h 
<hl> 到 <h6> 元 素 中 的 字母 h 是 英文 headline 的 简称 。 作 为 标题 ， 它 们 的 重要 性 是 有 
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区 别 的 ， 其 中 <hl> 标题 的 重要 性 最 高 ，<h6> 的 最 低 。 基 本 格式 如 下 : 


<h1> 一 级 标题 </h1> 一 级 标题 
<h2> 二 级 标题 </h2> 


<h3> 三 级 标题 </h3> SERN 
<h4> 四 级 标题 </h4> ZSRR 
<h5> 五 级 标题 </h5> mana 
<h6> 六 级 标题 </h6> s 


@ 标题 字 对 齐 属性 align 

默认 情况 下 ， 标 题 文字 是 左 对 齐 的 。 而 在 网 页 制作 过 程 中 ， 常 常 需要 选择 其 他 的 对 齐 
方式 。 关 于 对 齐 方式 的 设置 要 使 用 alien 参数 进行 设置 。 基 本 格式 如 下 : 

<align= 对 齐 方式 > 


属性 值 
left 
center 
right 
mD 实例 19+ 视频 : 使 用 标题 标签 
“a e e o a [En = Ís: PRD g 
生日 贺卡 
亲爱 的 朋友 : 
祝 你 生日 快乐 
希望 你 天 天 开心 ， 一 山 风 类 
a m EX 上 在。| m- C @ | 2 U) -0s + 


f 源 文件 : 源 文件 \ 第 2 章 \2-5-2.html 


FPIPƏPIPTEETTEIIEETI IS 


PEFTIDIEIIDICYEPT'ITIKIESJ 


LEZNI 而 语 


[01 执行 “文件 > 新建 ”命令 ， 新 建 一 个 HIML 5 文档 。 在 <body> 标签 中 单 击 并 输入 
相应 文字 和 代码 。 


上 
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"= —r = 
4 3 四 e 5 * [= sen -Jig-== AECHE 
生日 贺卡 
亲爱 的 朋友 : 
视 你 生日 快乐 
| FERRARO. MN- 
ee =Z ni -j [% omm a m- G + z Uü - ow + | 
(02 PHAT “X#E > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 2 章 \2-5-2.html”， 双 击 打开 ， 


在 浏览 器 中 查看 效果 。 


提问 : 每 个 标题 字 具 体 的 大 小 是 多 少 ? 
答 : 对 于 不 同 的 浏览 器 ， 其 确切 的 尺寸 大 小 也 不 相同 ， 但 <h1> 标题 大 
约 是 标准 文字 高 度 的 2-3 倍 ， 而 <h6> 标题 则 比 标准 字 还 要 略 小 。 


2.5.3 文本 基本 属性 


<font> 标签 用 来 控制 字体 、 字 号 和 颜色 等 属性 ， 它 是 HTML 中 最 基本 的 标签 之 一 ， 掌 
握 好 <font> 标签 的 使 用 是 控制 网 页 文本 的 基础 。 
@ 字体 属性 face 

通过 face 属性 可 以 设置 不 同 的 字体 ， 设 置 的 字体 效果 必须 在 浏览 器 中 安装 相应 的 字体 
后 才 可 以 正确 浏览 ， 否 则 有 些 特 殊 字体 会 被 浏览 器 中 的 普通 字体 所 代替 。 因 此 ， 在 网 页 中 
尽量 减少 使 用 过 多 的 特殊 字体 ， 以 免 用 户 浏览 时 无 法 看 到 正确 的 效果 。 基 本 格式 如 下 : 

<font face=" 字 体 样式 ">…</font> 
@ 字号 属性 size 

文字 的 大 小 也 是 重要 的 属性 之 一 。 除 了 使 用 标题 文字 标签 设置 固定 大 小 的 字号 之 外 ， 
HTML 语言 还 提供 了 <font> 标签 的 size 属性 来 设置 普通 文字 的 字号 。 基 本 格式 如 下 : 


<font size=" 文 字 字 号 ">…</font> 


@ 颜色 属性 color 

在 HIML 页 面 中 ， 还 可 以 通过 不 同 的 颜色 表现 不 同 的 文字 效果 ， 从 而 增加 网 页 的 亮丽 
色彩 ， 吸 引 浏览 者 的 注意 。color 属性 用 来 定义 文字 的 颜色 ， 它 可 以 和 <font> 元 素 的 其 他 
属性 一 起 配合 定义 字体 的 各 种 样式 ， 各 个 属性 之 间 没有 先后 次 序 。 基 本 格式 如 下 : 

<font color=" 文 体 颜色 ">…</font> 


时 有 时 候 用 户 在 设置 完 文字 颜色 后 ， 可 能 会 造成 文字 全 部 消失 看 不 到 的 情 
况 ， 这 时 候 可 能 是 文字 颜色 与 背景 颜色 相同 造成 的 。 
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(> 实例 20+ 视频 : 使 用 <font> 标签 


L 
+e es. 


床 前 明月 光 ， 


m- G enm- 


A 源 文件 : 源 文件 \ 第 2 章 \2-5-3. html 


iU wasa ama 


[Lo1 P] 执 行 “ 文 件 > 新 建 ” 命 令 ， 新 建 一 + HTML 5 文档 。 在 <body 衬 芝 第 击 并 输入 


相应 文字 和 代码 。 
S T — = 
+ C e klim -Jis- == == 
床 前 明月 光 ， 
疑 是 地 上 霜 。 
[ae egesi 


[62> 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 2 章 AO-5-3 html” IANA, 
在 浏览 器 中 查看 效果 。 


?# 提问 :怎样 能 使 一 个 <font> 标签 中 的 文字 出 现 两 种 不 同 的 文字 颜色 ? 
答 : 用 户 可 以 通过 <font> 标签 的 嵌 套 来 得 到 这 种 效果 ， 如 <font 
color="#FF0000"> $ <font color="#000000"> 文字 </font> 效果 </font>。 


在 HIML 中 , 还 有 一 些 文本 格式 化 标签 用 来 设置 文字 以 特殊 的 方式 显示 ， 如 粗 体 标签 、 
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斜体 标签 和 文字 的 上 下 标签 等 。 
@ 粗 体 标 签 b、strong 

<b> 和 <strong> 是 HTML 中 格式 化 粗 体 文 本 的 最 基本 元 素 。 在 <b> 和 </b> 之 间 的 文 
字 或 在 <strong> 和 </strong> 之 间 的 文字 ， 在 浏览 器 中 都 会 以 粗 体 字 体 显 示 。 首 尾部 分 都 
必须 有 该 元 素 ， 如 果 没 有 结尾 标签 ， 则 浏览 器 会 认为 从 <b> 开始 的 所 有 文字 都 是 粗 体 。 
<b> 和 <strong> 是 行内 元 素 ， 它 可 以 插入 到 一 段 文 本 的 任何 地 方 。 基 本 格式 如 下 : 

<b> 加 粗 的 文字 </b> 

<strong> 加 粗 的 文字 </strong> 
Ə 斜体 标签 1j、em、cite 

<i>, <em> 和 <cite> 是 HTML 中 格式 化 斜体 文本 的 最 基本 元 素 。 在 <i> </i> 之 间 
的 文字 、 在 <em> 和 </em> 之 间 的 文字 或 在 <cite> 和 </cite> 之 间 的 文字 ， 在 浏览 器 中 都 
会 以 斜体 字体 显示 。 基 本 格式 如 下 : 

<i> 和 斜体 字体 </i> 


<em> 和 斜体 字体 </em> 
<cite> 和 斜体 字体 </cite> 


S KH 21+ 视频 : 使 用 粗 体 、 和 斜体 标签 


| Ø mS Wem erret pi i N E UM 
OU o == 
x Gange ET 
som a 
LL al Ñ - @ - C: @ - mp mo. mo. @- “ 
MERR 
ze 
大 AARTE. 
HE ausis. 
4 
masma, eanas 
pa mr aa x 


f 源 文件 : 源 文件 \ 第 2 章 2-5-4 html 


Ctrl+Shift+O 
Ctrl+W 
Ctrl+Shift+W 
01 BP] 打开 Adobe Dreamweaver CS6 软件 ， 执 行 “ 文 件 > 打开 ”命令 ， 在 弹出 的 “打开 ” 
对 话 框 中 选择 “素材 \ 第 2 章 \25401.html”， 单 击 “打开 ”′ 按 钮 。 
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Pes so 


[iie 


- aom 


EE 


， 并 在 该 标签 中 输入 文本 ， 使 用 相同 的 方 


mea 


[ 02 Pj 在 代码 视图 中 为 <body> 标签 添加 相应 属 
法 ， 完成 其 他 位 置 标签 的 添加 。 


mě = s W k i 
m - + # [al PRD: m 


+e e x[i] a 


META 
| e 


m m. 2 e z ID - mvx + | 


[93 执行 “文件 > 另存 为 命令 ， 将 其 另存 为 “ 源 文 件 \ 第 2 章 \2-5-4.html” ， 双 击 打开 , 
在 浏览 器 中 查看 效果 。 


提问 : 粗 体 、 斜 体 标签 在 HTML 文档 中 的 什么 位 置 ? 
答 : 粗 体 、 斜 体 标签 必须 放置 在 HTML 文档 中 <body>…</body> 标签 
对 的 内 部 。 


255 

许多 语言 需要 使 用 下 标 或 上 标 来 呈现， 并 且 一 些 网 页 的 数学 运算 也 需要 用 下 标 或 上 标 
来 呈现 。 
@ 上 标 标签 sup 

上 标 字体 <sup> 的 英文 原名 为 superscript， 在 各 种 数学 公式 、 日 常 计算 应 用 、 书 籍 文 
章 注解 甚至 一 些 外 语 脚本 里 都 有 广泛 的 应 用 。<sup> 元 素 也 是 行内 元 素 ， 它 可 以 成 对 出 现 
在 一 段 文字 的 任何 地 方 ， 并 且 允 许 典 套 使 有 用。 因此， 如果 在 <sup> 里 再 使 用 <sup>, 则 会 
变 成 “上 标的 上 标 ”。 基 本 格式 如 下 : 

<sup> 上 标 内 容 </sup> 
Ə 下 标 标签 sub 

下 标 字 体 <sub> 的 英文 原名 为 subscript， 在 各 种 数学 公式 、 化 学 方程 式 中 ， 下 标 字 体 
有 着 广泛 的 应 用 。 基 本 格式 如 下 : 


<sub> 下 标 内 容 </sub> 


EE 


© MOADE J 


| Gasmar r = B- U @ s D| - mx + | 


f 源 文件 : 源 文件 \ 第 2 章 \2-5-5. html A 操作 视频 : 视频 \ 第 2 章 \2-5-5. swf 


Dw m o 2 marna. DE eel) 
REN RRO SEV MND PAM WUO SAQ HEAS BON) WA 
mtr x 


YETTTDUE:I 


EEEE En] 


相应 文字 和 代码 。 


rl 
mam . 
OO feh m e Rm: | 
(asb) 32=a242: 
Alo 
mustasa - 
Bak wa pa mna i === 
EE? B- Oez m - mx + 


[602 了] 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 2 章 \2.5.5 html”, F2 
测试 页 面 的 效果 。 


提问 : 有 些 复杂 的 公式 中 ， 下 标 上 仍旧 有 下 标 ， 这 时 该 如 何 编写 ? 

B: <sub> 元 素 也 是 行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文字 的 任何 地 方 ， 
并 且 可 以 将 多 个 <sub> 元 素 作用 于 同一 段 文字 ， 因 此 如 果 在 <sub> 里 再 使 用 
<sub>， 则 会 变 成 “下 标的 下 标 ”。 
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大 小 字号 和 下 划 线 

Ə 大 字号 标签 big 

<big> 标签 用 来 增 大 文本 中 字号 的 大 小 ， 它 所 包含 的 文字 都 会 在 原来 的 字号 上 增加 一 
级 。<big> 作为 一 个 行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文 字 中 的 任何 位 置 。 基 本 格式 如 下 : 

<big> 内 容 </big> 
@ 小 字号 标签 smal1 

<small> 标签 所 包含 的 文字 ， 在 浏览 器 里 显示 会 比 普通 文字 小 一 级 。<small> 作为 一 个 
行内 元 素 ， 它 可 以 成 对 出 现在 一 段 文字 中 的 任何 位 置 。 基 本 格式 如 下 : 

<small> 内 容 </small> 
@ 下 划 线 标签 u 

<u> 标签 的 使 用 和 粗 体 以 及 斜体 标签 类 似 ， 它 作用 于 需要 添加 下 划 线 的 文字 。 基 本 格 
式 如 下 : 

<u> 下 划 线 内 容 </u> 


确实 例 23+ 视频 ;使 用 大 小 字号 和 下 划 线 


— 下 了 的 事 么 的 ar 
MARMANE- ERIE. Et 


q 全, Bast 所 JE。 B- G oO 12 U) - x + 


AR: 源 文件 \ 第 2 章 \2-5-6.html 


ITILLELLZLI) 
"u 


Babies 


Cor FP) 执行 “文件 > 打开 ”命令 ,将 “素材 \ 第 2 章 \25601.html” 打 开 ， 为 <body> 标签 中 
的 文本 内 容 添加 <center>、<br> 和 <big> 等 标签 。 
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执行 “文件 > 另存 为 ”命令 ， 将 其 另存 为 “ 源 文件 \ 第 2 章 \2.5.6html”， 按 F12 
键 测试 页 面 效果 。 


提问 : <big> 元 素 和 《smal1> 元 素 也 可 以 做 套 使 用 吗 ? 

答 : <big> TRH <small> 元 素 是 可 以 说 套 使 用 的 。 如 果 将 多 个 <big> 
元 素 或 <small> 元 素 谋 套 在 一 起 使 用 ， 那 么 其 中 的 文字 字号 将 会 被 逐 级 变 大 
或 缩小 。 


2.6 使 用 图 像 


图 像 是 网 页 中 不 可 缺少 的 元 素 ， 在 网 页 中 巧妙 地 使 用 图 像 可 以 为 网 页 增色 不 少 。 网 页 
美化 最 简单 、 最 直接 的 方法 就 是 在 网 页 上 添加 图 像 , 图 像 不 但 使 网 页 更 加 美观 、 形 象 和 生动 ， 
而 且 使 网 页 中 的 内 容 更 加 丰富 多 彩 。 利 用 图 像 创 建 精美 网 页 ， 能 够 给 网 页 增加 生机 ， 从 而 
吸引 更 多 的 浏览 者 。 


m =. 


2.6.1 图 像 的 格式 


网 页 中 图 像 的 格式 通常 有 3 种 ， 即 GIF. JPEG 和 PNG, BB GIF 和 JPEG 文件 格式 
的 支持 情况 最 好 ， 大 多 数 浏览 器 都 可 以 查看 它们 。 由 于 PNG 文件 具有 较 大 的 灵活 性 并 且 
文件 较 小 ， 所 以 它 对 于 几乎 任何 类 型 的 网 页 图 形 都 是 最 适合 的 ， 但 是 Microsoft Internet 
Explorer 和 Netscape Navigator 只 能 部 分 支持 PNG 图 像 的 显示 ， 所 以 建议 用 户 使 用 GIF 或 
JPEG 格式 ， 以 满足 更 多 人 的 需求 。 


插入 图 像 
图 像 是 网 页 构成 中 最 重要 的 元 素 之 一 ， 美 观 的 图 像 会 使 网 站 看 起 来 形象 生动 ， 加 深 浏 


ES 
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览 者 对 网 站 的 印象 。 
如 果 需 要 在 网 页 中 插入 图 像 ， 用 户 可 以 通过 <img> 标签 将 外 部 的 图 像 链 接 到 页 面 中 。 
属 性 描 述 
sre 图 像 的 源 文件 
title 提示 文字 
width，height 宽度 和 高 度 
border 边框 
vspace 垂直 间距 
hspace 水 平 间距 
align 排列 
dynsrc 设 定 文件 的 播放 
loop 设 定 文件 循环 播放 次 数 
loopdelay 设 定 文件 循环 播放 延迟 
start 设 定 文件 播放 方式 
lowsrc 设 定 低 分 辩 率 图 片 
usemap 映像 地 图 


@ 图 像 的 源 文件 src 
src 属性 用 于 指定 图 像 源 文件 所 在 的 路 径 ， 它 是 图 像 必 不 可 少 的 属性 。src 参数 用 来 设 
置 图 像 文件 所 在 的 路 径 ， 这 一 路 径 可 以 是 相对 路 径 ， 也 可 以 是 绝对 路 径 。 基 本 格式 如 下 : 
<img src=" 图 像 文 件 的 地 址 "> 


m 实例 24+ 视频 : 插入 图 像 


全 源 文件 : 源 文件 \ 第 2 章 \2-6-2. html A 操作 视频 : 视频 \ 第 2 章 \2-6-2. swf 
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mz m- o < — = z llela 
zan agn sv mo sama wao mao mOw amo 


< Aman TE —===[3 


mas. kasa sq un - w N Ñ mis era =-. | 


Oie “文件 > 打开 ” 命令 ， 将 n 2 OOL html” 打开 ， EAF 
<div> 标签 中 输入 <img> 标签 ， 并 通过 src 属性 将 外 部 的 图 像 链 入 到 文档 中 。 


TPR 


[02_ >] 执行 “文件 > 另存 为 ”命令 ， 将 其 另存 为 i ， 按 F12 
键 测试 页 面 的 效果 。 


? é 


< 提问 : 需要 插入 的 图 像 必 须 是 本 地 的 图 像 吗 ? 
答 : 图 像 的 地 址 可 以 使 用 本 地 的 文件 地 址 ， 例 如 html/image/001.jpg, 
也 可 以 使 用 网 络 中 的 图 像 作为 地 址 ， 例 如 http:/html.com.cn/1/001.jpgo 


2.6.3 图 片 的 大 小 

用 户 可 以 通过 width 属性 和 height 属性 分 别 来 定义 图 片 高 度 和 宽度 的 像素 值 。 如 果 没 
有 指定 图 片 的 高 度 和 宽度 ， 图 片 将 以 原始 大 小 显示 。 

用 户 既 可 以 对 图 像 的 宽 高 进行 等 比例 的 放大 或 缩小 ， 也 可 以 单独 将 宽 高 的 任意 一 个 属 
性 进行 放大 或 缩小 ， 另 一 属性 保持 不 变 ， 这 样 就 会 造成 图 片 的 拉 伸 变形 。 


原始 图 像 等 比例 缩小 单独 缩小 宽度 单独 缩小 高 度 


第 2 章 网 页 基本 HTML 标签 M 


基本 格式 如 下 : 
<img src=" 图 像 文件 的 地 址 ”width=" 图 像 的 宽度 ”height=" 图 像 的 高 度 "> 


=> 实例 25+ 视频 : 修改 图 片 大 小 | 


a -SEE -EI - w 


fi 源 文件 : 源 文件 \ 第 2 章 \2-6-3.html 


Ph amam: Onon rReeaae an: ass Ñ. 和 r 


CODI “文件 > 新建 ”命令 ， 新 建 一 个 HTML 5 文档 。 在 代码 的 <body> 标签 对 中 输入 
相应 代码 。 将 文件 保存 为 “ 源 文件 \ 第 2 章 \2-6-3.html”， 按 F12 键 测试 页 面 效 果 。 


<!doctype html> — 
2 KEE .. 
<head> 

neta charset="utf-8"> 
<title> 无 标题 文档 </title> 

< /head> 


<body> 
JEE <img src="images/26301.jpg" width= 
"394" height="196"> 


(02 返回 文档 ， 对 代码 进行 相应 的 修改 。 将 文件 进行 保存 ， 按 F12 键 在 浏览 器 中 预览 该 
页 面 效果 。 


提问 : 在 Dreamweaver 中 缩小 图 像 ， 可 以 减 小 图 像 的 体积 吗 ? 
答 : 无 论 用 户 对 width 和 height 属 性 指定 任何 值 , 都 无 法 更 改 图 像 的 体积 ， 
因为 Dreamweaver 是 使 用 链接 的 方式 将 图 像 由 外 部 链接 到 文档 中 。 


2.6.4 图 像 提示 文字 


提示 文字 有 两 个 作用 ， 当 浏览 该 网 页 时 ， 如 果 图 像 下载 完 成 ， 将 鼠标 指针 放 在 该 图 像 
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上 ,， 鼠 标 指针 旁边 会 出 现 提示 文字 。 也 就 是 说 ， 当 鼠标 指针 指向 图 像 上 方 的 时 候 ， 稍 等 片刻 
可 以 出 现 图 像 的 提示 性 文字 ， 用 于 说 明 或 描述 图 像 。 第 二 个 作用 是 ， 如 果 图 像 没 有 被 下 载 
在 图 像 的 位 置 上 就 会 显示 提示 文字 。 基 本 格式 如 下 : 

<img src=" 图 像 文件 的 地 址 " title=" 提 示 文 字 的 内 容 "> 


mD 实例 26+ 视频 : 图 像 提示 字 


z. GUERRA DE CREATIVOS 


ba 


A 操作 视频 : 视频 \ 第 2 章 \2-6-4. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<cicle> 无 标题 文档 </zicle> 
</head> 


<body> 
<img src="images/26401.jpg" title=") 
是 一 个 神奇 的 网 站 "> 
</body> 
</html> 


[OT 执行 文件 新建 ”命令 ， 新建 一 个 HTML 5 文档 , 在 <body> 标签 中 输入 <img> 标签 ， 
并 通过 该 标签 的 src 属性 链 入 图 片 ， 再 次 输入 title 属性 ， 在 该 属性 值 中 输入 图 像 提示 文字 。 


CEJ [= = 一 -| 
s -osm 


z. GUERRA DE CREATIVOS 


OPR “X> RE AF, BERGA AXE 2E AQ-6-Ahtml”, F12 
测试 页 面 的 效果 。 


提问 : 图 片 提示 文字 在 实际 生活 中 有 什么 用 处 ? 

答 : 对 一 些 具有 视觉 障碍 的 用 户 来 说 ， 网 页 中 的 内 容 对 于 他 们 并 不 重要 ， 
他 们 往往 使 用 的 是 语音 合成 浏览 器 。 这 时 候 ， 如 果 用 户 为 图 像 添 加 了 图 片 提示 
文字 ， 语 音 合成 会 朗读 title 元 素 中 的 文本 。 


EE o 
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默认 情况 下 ， 图 像 是 没有 边框 的 ， 通 过 border 属性 可 以 为 图 像 添加 边框 线 。 可 以 设置 
边框 的 宽度 ， 但 边框 的 颜色 是 不 可 以 设置 的 。 当 图 像 上 没有 添加 链接 的 时 候 ， 边 框 的 颜色 
为 黑色 ; 当 图 像 上 添加 链接 时 ， 边 框 的 颜色 和 链接 文字 颜色 一 致 ， 默 认为 深蓝 色 。border 
的 单位 是 像素 ， 值 越 大 边框 越 宽 。 


sii G s 
GLAZURA 


基本 格式 如 下 : 
<img src=" 图 像 文件 的 地 址 " border=" 图 像 边 框 的 宽度 "> 


26.6 图 像 的 边 距 


通常 在 设计 页 面 时 ， 都 不 会 让 图 像 和 其 周围 文字 之 间 的 空间 过 于 狭小 ， 而 图 像 与 文字 
之 间 会 自动 默认 添加 2 个 像素 的 距离 ， 但 是 这 对 于 大 多 数 设计 者 来 说 还 是 太 过 于 接近 了 。 
这 时 候 用 户 就 需要 使 用 <vspace> 标签 和 <hspace> 标签 来 为 图 像 添加 边 距 的 大 小 了 。 


Sem consectetuer porttitor. Curabitur 
sclerisque. Eros vitae laoreetus. 


@ 图 像 的 垂直 边 距 vspace 

垂直 边 距 vspace 用 来 调整 图 像 与 文字 的 垂直 边 距 ，vspace 属性 的 单位 是 像素 。 基 本 格 
式 如 下 : 

<img src=" 图 像 文 件 的 地 址 ”vspace=" 垂 直 边 距 "> 
Ə 图 像 的 水 平 间距 hspace 
图 像 与 文字 之 间 的 水 平 距离 可 以 通过 hspace 参数 进行 调整 。 通 过 调整 图 像 的 边 距 ， 可 
以 使 文字 和 图 像 的 排列 显得 更 紧凑 。 基 本 格式 如 下 : 

<img src=" 图 像 文件 的 地 址 ”hspace=" 水 平 边 距 "> 
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D 实例 27+ 视频 : 图 像 的 边框 和 垂直 边 
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RER ERERIN: 


f 源 文件 : 源 文件 \ 第 2 章 \2-6-6. html A 操作 视频 : 视频 \ 第 2 章 \2-6-6. swf 


</head> 


<poay> 
<p>énbs; FRRGRREREH 
ET IURA F FENRAEST DENER, 为 人 们 最 
常食 用 的 一 种 水 果 革 果 腾 食 纤维 合 重 丰 富 ， 也 全 有 大 重 的 果 肢 ,对 
于 油 束 区 肖 栈 料 有 很 大 的 帮助 ， 经 党 吃 可 使 皮肤 更 水 词 cimz 
“images/ idth="213" height="213" 
° ¿p> 


<p> nbsp : krbsp :&nbsp: nbsp : nbsp :&nbsp : nbsp: ¿nbs 
BHFRRADHRA. ERAH EAS TIz-T h tybis 
WR atasi - 该 种 有 两 个 去 种 ;道生 车 办 和 乐园 革 困 ， 党 
被 用 作乱 化 或 丰 姓 化 站" EA LAFAR HAANS SE 
果 、 尖 北海 党 、 河 南海 染 和 山 定子 等 FRHSARTHH Az 

— 4 的 花 座 果 校 为 理想 * 吕 然 成 熟 苹 果 的 大 小 、 形状、 颜色 和 柄 度 因 
品 冲 和 环境 条 件 的 不 同 而 差 恒 很 大 ， 但 通 党 图 H ， 直 径 5o" 100nm(2 
一 4 时 )， FIERME. </p> 


</body> 


</html> 


[01 PIHT X> 打开 ”命令 ， 将 Pra 第 2 章 \26601.html” 打 开 ， 在 <img> 标签 中 
添加 border、vspace 和 align 属性 ， 并 设置 相应 的 属性 值 。 


-0pm š 
pasa J an - @ 加 * + wave ih + | Ae E 
maamo 2e 
muan Mehen poormre ET 
pr # 给 信 人 丰富， 也 含有 大 全 的 采 拉 ， 对 于 调整 站 这 面 灶 有 很 大 的 大 时 


"inn 


mumm ua 
mumm Norhen Deore 
mumn warten peer 
awam: Si - CED 
CT 
menengen masna r 
—_ 28 00 ass 


[02 >] 执 行 “ 文 件 > 另存 为 ”命令 ， BEZGA e O , Ë F12 
键 测 试 页 面 效果 。 


提问 : 边 距 的 空白 处 可 以 添加 元 素 吗 ? 
答 : 使 用 hspace 和 vspace 元 素 会 在 图 像 的 周围 添加 空格 ， 也 就 是 说 这 
空白 的 区 域 其 实 已 经 被 空格 占用 了 , 所 以 空白 的 区 域 不 能 加 入 其 他 的 元 素 。 


图 像 与 文字 之 间 的 对 齐 是 通过 align 属性 来 设 定 的 ，align 的 对 齐 方式 有 两 种 : 绝对 对 


第 2 章 网 页 基本 HTML 标签 M 


齐 和 相对 对 齐 。 绝 对 对 齐 方式 的 效果 和 文字 一 样 ， 只 有 3 种 : 居中 (middle) 、 居 左 (left) 、 
BA (right) 。 相 对 对 齐 方式 是 指 图 像 与 一 行文 字 的 相对 位 置 。 基 本 格式 如 下 : 

<img src=" 图 像 文件 的 地 址 ” align=" 文 字 的 对 齐 方式 "> 

属 性 描 述 

bottom 图 片 的 底部 和 当前 行 的 文字 底部 对 齐 
top 图 片 的 顶端 和 当前 行 的 文字 顶端 对 齐 
middle 图 片 水 平 中 线 和 当前 行 的 文字 中 线 对 齐 
left 图 片 左 对 齐 
center 图 片 水 平 中 线 和 当前 行 的 文字 中 线 对 齐 
right 图 片 右 对 齐 


mb 实例 28+ 视频 : 网 页 图 文 排版 | 


[= E 


+ @ @ 9 * + necne i -| 8: Pra- cja 


wnnagryapuasanun, MHEN. wnmayaaunpi 
RR An. SEMGRSEEE. CARARMRN. PTaTEa RHN 
` temel 水 和 


加 m- Q : D| - mv + 


A 操作 视频 : 视频 \ 第 2 章 \2-6-7. swf 


bcayy> 
p>inpep ?knbep ;Enbepi cnbep cnbep: nbsp: RS SBT RN 
Fana, 人 人 


PAR SMERFESEFE OSAARNORE. N 
et Df E Kang sxc= 
“images/26601.jpg" vidtn<=213" helghc="213” aligne"rignht">" 
</p> 

<p> 5nbep; 5nbep ; cnbepy 节 果 是 于 
a eT 

神 相 其 介 种 的 杂交 晶 种 SPARTAN: ets mis sem, A 
mate +itcihe = Emri A0M. ABN053E . 63 

m. MLSS 3852073, S9WG ABG. B2 

C AABSLE RD SBS. R SBS DJ. WR. BE QE 
ARNRRRRNTAMESAA: CAREL. Btzso— 100 (2 

一 4 时 ) BEBE. </p> 

</tody> 

<em> 


z I 
[01P] 执 行 “ 文 件 > 打开 ”命令 ， 将 “素材 \ 第 2 章 \26601 html” HF, £ <img 标签 中 
输入 align 属性 ， 并 设置 属性 值 为 right。 


e= — amaka u 


C 


@ @ a Fisen š -|E sna- 


an IETUTANNYRENN MINE, SARRERAN AREE. S DEF 
GHAEREE. CARARNRK. HF AANER RAHME 


m. G z m - w 


[到 站 执行 “文件 > 另存 为 ”命令 ， 将 其 另存 为 “ 源 文 件 \ 第 2 章 D-6-7himl”， 按 Fl12 
键 测试 页 面 的 效果 。 


WojEHrur 5 > 网 页 制作 > 全 程 揭秘 


提问 : 为 什么 制作 出 的 效果 和 书 中 有 些 差 别 ? 
答 : 因为 不 同 的 浏览 器 或 者 同一 个 浏览 器 的 不 同 版 本 对 align 属性 的 某 
些 值 的 处 理 方式 是 不 同 的 ， 这 就 有 可 能 会 造成 外 观 上 的 差异 。 


26.8 MELEM 


用 户 除了 可 以 为 文字 添加 超 链 接 以 外 ， 也 可 以 为 图 像 添 加 超 链接 属性 。 同 一 个 图 像 的 
不 同 部 分 也 可 以 链接 到 不 同 的 文档 。 图 像 的 链接 和 文字 的 链接 方法 基本 相同 ， 也 是 用 <a> 
标签 来 完成 ， 只 需要 将 <img> 标签 放 在 <a>…</a> 标签 对 之 间 就 可 以 了 。 


POINTERS 


g 


* ALITTLE POWER SMART GOES A LONG WAY + 


<a href=" 链 接地 址 "><img arc=" 图 像 文件 的 地 址 "></a> 


m 实例 29+ 视频 : 创建 图 像 超 链接 


A 操作 视频 : 视频 \ 第 2 章 \2-6-8. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 c/titie> 
</head> 


<body> 
<a href="images/26801.jpg"><img src= 
"images/26802.jpg"> 


</body> 


lait aenea, </html> 
m 


OP NE AS, 3FEE— 4 HTML 5 文档 。 在 代码 的 <body> 标签 对 中 输 
入 相应 代码 。 
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人 四 


mak ERAST. MEENTE - a 
E wasa E Po bY ps 


| ezam ee saom 
[02 PHI X> 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 2 章 \2-6-8.html”， 按 Fl12 键 
测试 页 面 的 效果 。 


II sa. 为 什么 图 片 加 超 链 接 之 后 ， 会 出 现 外 边框? 
R 答 : 有 时 候 因为 网 页 的 某 些 设置 问题 ， 图 片 添加 超 链 接 后 会 出 现 难看 的 
蓝 色 边 框 。 此 时 用 户 只 需要 为 标签 添加 border 属性 并 为 其 指定 属性 值 为 0 即 
可 ， 例 如 <a href="#"><img src="001.jpg" border="0"></a>。 


号 天 天 图 像 热 区 链接 


用 户 不 仅 可 以 将 整 幅 图 像 作 为 链接 的 载体 ， 还 可 以 将 图 像 的 某 一 部 分 设 为 链接 ， 这 就 
需要 将 图 片 划分 出 一 个 或 多 个 热点 区 域 来 实现 , 每 一 个 热点 区 域 都 可 以 链接 到 不 同 的 网 页 。 
基本 格式 如 下 : 

首先 需要 在 图 像 文件 中 设置 映射 图 像 名 ， 在 图 像 的 属性 中 使 用 <usemap> 标签 添加 图 
像 要 引用 的 映射 图 像 的 名 称 。 

<img src=" 图 像 地 址 ”usemap=" 映 射 图 像 名 称 "> 

然后 定义 热 区 图 像 以 及 热 区 的 链接 。 

<map name=" 映 射 图 像 名 称 "> 


<area shape=" 热 区 形状 ”coords=" 热 区 坐标 ”href=" 链 接地 址 "> 
</map> 


mb 实例 30+ 视频 : 使 用 图 像 热 区 创建 链接 


= =L s s= == —— 


[EC 


a == = 国 - | 口 *@ u T 


f 源 文件 : 源 文件 \ 第 2 章 \2-6-9. html A 操作 视频 : 视频 \ 第 2 章 \2-6-9. swf 


© 5 > 网 页 制作 > 全 程 揭秘 


Co 多 执行 “文件 > 打开 ”命令 ， 将 “素材 \ 第 2 章 \26901.html” 打 开 ， 为 <img> 标签 添 
加 usemap 属性 ， 使 用 相同 的 方法 输入 其 他 的 标签 。 


w. z — 


r= as L 


Ome nopazr- sm sa B- CENE E 


[02 Pp] 执 行 “文件 > 另存 为 ” 命令 将 将 其 另存 为 i el 
键 测试 页 面 的 效果 。 


提问 : 为 什么 在 一 个 文档 中 使 用 多 个 热点 ， 但 是 有 一 些 却 没有 作用 ? 
答 : 用 户 如 果 需 要 在 一 个 文档 中 使 用 多 个 热点 ， 首 先 要 确保 所 有 map 
元 素 都 是 具有 唯一 性 的 ， 也 就 是 要 确保 所 有 map 元 素 的 名 称 都 不 相同 。 


2.7 使 用 列表 


列表 元 素 是 网 页 设计 中 使 用 频率 非常 高 的 元 素 ， 也 是 占 很 大 比重 的 元 素 。 该 元 素 可 以 
让 设计 者 能 够 对 相关 的 元 素 进 行 分 组 ， 使 信息 的 显示 变 得 非常 整齐 直观 ， 便 于 用 户 理解 与 
选择 点 击 ， 例 如 新 闻 列 表 、 产 品 列 表 和 链接 列表 等 。 


有 序列 表 (ol 元 素 ) | 


有 序列 表 表示 每 一 个 元 素 都 具有 序列 区 分 ， 从 上 至 下 可 以 为 数字 、 字 母 和 罗马 字母 等 


多 种 不 同 的 形式 。 
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签 


有 序列 表 由 <ol> 和 </ol> 标签 对 实现 ， 每 个 列表 项 由 <d> 标签 开始 (结束 标签 不 是 必 


须 的 ) 。 


<o1> 
<1i> 第 一 个 列表 项 
<1i> 第 二 个 列表 项 


<1i> 第 三 个 列表 项 
</o1> 


1. 第 一 个 列表 项 
2. 第 二 个 列表 项 
3. 第 三 个 列表 项 


=> 实例 31+ 视频 : 定义 有 序 新 闻 列表 | 


。 【体育 ] 男 路 惨败 中 华 台北 创 亚 锦 赛 39 年 最 差 

。 [要 闻 ] 菲 律 宾 道 美国 增 派驻 菲 军队 白宫 拒绝 回应 

。 [要 闻 ] 高 雄 市 长 陈 菊 访问 天 津 改称 ' 中 国 ' 为 "中 国 大 陆 ” 
- [本 地 ] 访 民 通 霄 排队 见 中 央 j 


发 觉 对 方 是 本 地 口音 
- [社会 ] 大 连 行政 执法 局 长 袭 先 勃 被 揭 曾 被 实名 举报 
- [财经 ] 去 年 近 11 万 家 庭 违规 住 保障 房 万 户 被 取消 资格 
- [体育 ] 足 协 闭 门 2 天 研讨 国足 选 籼 被 告 诚 不 得 过 密 
。 [娱乐 媒体 分 析 解 放 军 新 晋 大 区 级 将 领 夺 数 为 政治 主 官 
- [社会 ] 山 东 卫 生 厅 劫持 案 焰 犯 称 单位 品 其 维权 证 据 


f 源 文件 : 源 文件 \ 第 2 章 \2-7-1.html 


-O 


DEERTIT A 


J 


macoy ` 
L T: 


A 操作 视频 : 视频 \ 第 2 章 \2-7-1. swf 


<body> 
<div id="box"> 
<div id="lie"> 
<p>[ 体 育 ] 男 篮 惨败 中 华 台北 创 亚 锦 赛 39 年 最 差 </p> 
<p> [要闻 ] 菲律宾 道 美国 增 派驻 菲 军队 白宫 拒绝 回应 </p> 
<py>[ 要 闻 ] 高 雄 市 长 陈 薄 访问 天 津 改称 中国 ,为 ' 中 国 大 陆 '</p> 
<p>[ 本 地 ] 访 民 通 宵 排队 见 中 央 巡 视 组 发 觉 对 方 是 本 地 口音 </P> 
<p>[ 社 会 ] 大 连 行政 执法 局 长 厅 先 勃 被 免 曾 被 实名 举报 </p> 
<py>[ 财 经 ] 去 年 近 :1 万 家 庭 违规 住 保障 房 5 万 户 被 取消 资格 </p> 
<py>[ 体 育 ] 足协 闭 门 2 天 研讨 国足 选 帅 被 告 讳 不 得 泄密 </p> 
<p>[ 娱 乐 ] 媒 体 分 析 解 放 军 新 亚 大 区 级 将 领 半数 为 政治 主 官 </p> 
<p>[ 社 会 ] 山东 卫生 厅 动 持 案 嫌犯 称 单位 毁 其 维权 证 所 </p> 
</o1> 
</div> 
</div> 
</body> 


[91 执行 “文件 > 打开 ”命令 ,将 “素材 \ 第 2 章 \27101.html” 文 档 打 开 。 在 <body> 标 
签 中 的 <div id="lie"> 内 输入 文本 内 容 ， 并 且 为 文字 分 段 。 


<body> 
<div id-"box"> 
<div id="lie"> 
<ol> 
cio ft B AESi WERF FRE</p></1i> 
<11><p> (Ei 39 Be EUE KNEE 白宫 拒绝 回应 </p></1:> 
<li><p>[ 要 闻 ] 高 娃 市 长 陈 薄 访 问 天 津 改称 "中 国 ' 为 ,中 国 大 陆 "</p></1iy> 
<11><p>[ 本 地 ] 访 民 通宵 排 队 见 中 央 光 视 组 发 党 对 方 是 本 地 口音 </p></13> 
<11><p>f 社 会 ] 大 连 行政 执法 局 长 蔡 先 秘 被 免 曾 被 天 名 举报 </p></12> 
<1i><p>[ 财 到 ] 去 年 近 11 万 家 庭 违规 住 保障 庆 5 万 户 祯 取消 资格 </F></13> 
i Ri asia p. li> 
6453492958 R E Bc p> li> 
<11><p> ES UR PETAR RMR R EtiRIRUEIE c /p></11> 
</ol> 
</aiv> 
</a> 
</body> 
<em> 


。 U4818986W0htEedl GHi08S3SE EE 

- [Ein iH*Fe =IssatsriisEiA AS 应 

[要闻 1 高 雄 市 长 陈 区 访问 天 津 改称 "中 国 大 陆 * 
- [本 地 ] 访 民 通 再 排队 见 中 央 过 视 组 发 揭 对 万 是 本 地 口音 


- [社会 1 大 连 行 政 执法 局 长 化 先 勃 宰 免 兰 视 实名 举报 
【财经 1 去 年 近 11 万 家 训 连 规 住 误 障 房 5 万 户 禄 取消 资格 
- [体育 1 足协 闭 门 2 天 研讨 国足 选 籼 Wiwa matar 
-。 [ 苦 乐 ] 捍 体 分 析 解放 宇 新 晋 大 区 圾 将 领 半 妇 为 天 治 主 官 
[社会 1 山东 卫生 厅 动 持 案 媒 把 称 单位 涡 其 维权 证 所 


[02 FP]) 为 刚刚 输入 的 内 容 添加 <ol> 和 <li> 标签 ， 将 文档 另存 为 “ 源 文件 \ 第 2 章 \2-7-1. 


html”， 按 F12 键 测试 页 面 效 果 。 


© MOAIE J 


ze 提问 : 有 序列 表 可 以 应 用 CSS 3? 
2: £ HTML 中 ， 用 户 可 以 通过 CSS 属性 对 列表 进行 更 好 的 控制 ， 从 
而 可 以 得 到 更 好 的 网 页 界面 效果 。 


匡 到 对 自 定义 有 序列 表 的 序号 

默认 情况 下 ， 有 序列 表 的 序号 是 阿拉 伯 数 字 ， 但 是 用 户 可 以 通过 type 属性 改变 序号 的 
类 型 ， 包 括 大 小 写字 母 和 大 小 写 罗马 数字 等 。 

对 于 ol 元素， 用户 可 以 使 用 下 表 所 列 出 的 type 属性 值 (注意 区 分 大 小 写 ) 。 


type 属性 值 序号 呈现 样式 
1 阿拉 伯 数 字 2 
a 小 写字 母 二 
A 大 写字 母 À, B, Cr 22 
i 小 写 罗 马 字母 1, Ti ili eR 
I 大 写 罗马 字母 1, H, M, ... 


mb 实例 32+ 视频 : 定义 新 闻 列 表 序号 样式 


i [体育 ] 男 签 惨败 中 华 台 北 创 亚 锦 赛 39 年 最 差 

i GAMARRA EN 白宫 拒绝 回应 

š. [要 闻 ] 高 锥 市 长 陈 菊 访 问 天 津 改称 中 国 为 中 国 大 陆 ' 
六 [本 地 ] 访 民 通 宵 排 队 见 中 央 近 视 组 发 觉 对 方 是 本 地 口音 
v. 吐 会 ] 大 连 行政 执法 局 长 获 先 勃 被 免 Wiksa sep 


vi 财经 ] 去 年 近 11 万 家 庭 违规 住 保障 房 5 万 户 被 取消 资格 
wi [体育 ] 足 协 闭 门 2 天 研讨 国足 选 帅 被 告 诚 不 得 泄密 
vi 忠 乐 ] 媒 体 分 析 解放 军 新 晋 大 区 级 将 领 半数 为 政治 主 言 
x [社会 ] 山 东 卫 生 厅 雪 持 案 嫌 犯 称 单位 锅 其 维权 证 据 


CC | 


f 源 文件 : 源 文件 \ 第 2 章 \2-7-2 html A 操作 视频 : 视频 \ 第 2 章 \2-7-2. swf 
a <body> 


<ol type="i"> 
aop TTE) 男 答 惨 几 {中 华 台北 创 亚 锦 赛 39 年 最 差 </p></11> 
<11><p> [MA SIP EB SLE SESI, 白宫 拒绝 回应 </p></1: 
<11>cp> [要闻 ] 高 友 市 长 陈 敬 访问 天 津 改称 ,中 国 ,为 ,中 国 大 陆 '</ 
<li><p>[ 本 地 ] 访 民 通宵 排队 见 中 央 近 视 组 发 沉 对 方 是 本 地 口音 </ 
<li><py [社会 ] 大 连 行政 执法 局 长 村 先 亏 被 免 曾 被 实名 举报 </py</ 
<li><py[ 财 经 ] 去 年 近 11 万 家 庭 违规 住 保障 房 5 万 户 被 取消 资格 </P 
<11>cp> {体育 ] 足协 诸 门 2 天 研讨 国足 选 帅 被 告诫 不 得 地 密 </py</1 
<1i>cp>[ 损 乐 ] 媒 体 分 析 和 解放军 新 盏 大 区 级 将 领 半数 为 政治 主 官 </p> 
<li><py[ 社 会] 山东 卫生 厅 动 持 案 娄 犯 称 单位 贺 其 维权 证 据 </p></11 
</ol> 
</div> 
</div> 


[01 执行 “文件 > 打开” 命令， 将 “ 源 文件 \ 第 2 章 \2-7-1.html” 文 档 打 开 。 在 代码 视图 
中 修改 <ol> 标签 ， 为 其 添加 有 序列 表 样式 。 


第 2 章 网 页 基本 HTML 标签 KÁ 


EE 
saza = = 
masomo ma 


i HARRE SN EAR 他 于 锦 赛 39 年 最 差 

s. BERRF4p2= e EBR: EFN 白宫 拒绝 加 应 

a ERRER R php Elin ELA 
š. HERA FƏ825sHIBA 1 mani 


v HSDB kRAS 

v 国 经 ] 夺 年 近 !11 万 家 庭 过 规 住 保 障 房 

vi [体育 ] 呈 协 闭 门 > 天 研讨 国 中 选 帅 

E [取乐] 媒体 分 析 解 放 军 新 亚 大 区 级 将 

K PISI Ds Tiplssoxim ARENE 


Eo = “wes 
Pa Wow gk sma, | 


[ 02 多 执行 “文件 > 另存 为 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 2 章 \2-7-2.html”。 按 F12 
键 在 浏览 器 中 测试 页 面 中 自 定义 有 序列 表 的 效果 。 


2? 提问 : type 属性 可 以 应 用 在 其 他 的 列表 中 吧 ? 
答 : type 属性 仅仅 适用 于 有 序列 表 ol 和 无 序列 表 ul 中 ， 并 不 适合 于 


录 列 表 、 自 定义 列表 和 菜单 列表 中 。 


序列 表 不 仅 可 以 自 定义 序号 的 样式 , 还 可 以 通过 ol 元 素 的 start 属性 来 定义 一 个 有 
des pan 


大 实例 33+ 视频 : 定义 新 闻 列表 的 起 始 数 


[体育 ] 田 答 惨 败 中 华 台北 创 亚 锦 赛 39 年 最 差 

- 号 闻 ] 菲 律 宾 递 美国 增 派驻 荐 军队 白宫 拒绝 回应 

. [要闻] 高 梭 市 长 陈 菊 访 问 天 津 改称 中 国 为 ' 中 国 大 陆 " 

[本 地 ] 访 民 通商 排队 见 中 央 过 视 组 发 觉 对 方 是 本 地 口音 

[社会 大连 行政 执法 局 长 蔡 先 擂 被 免 曾 被 奖 名 举报 
财经 ] 去 秆 近 11 万 家 庭 违 规 住 保障 房 5 万 户 被 取消 资格 

[体育 ] 足 协 闭 门 2 天 研讨 国足 选 帅 被 告诫 不 得 江 密 

.[ 引 乐 体 分 析 解 放 军 新 亚太 区 级 将 领 半数 为 政党 主 官 
吐 会 ] 山 东 卫 生 厅 动 持 案 嫌 犯 称 单位 锅 其 维权 证 据 


f 源 文件 : 人 A 操作 视频 : 视频 \ 第 2 章 \2-7-3. swt 
wama: papaq 
<div id="box"> 
<div id=e"lie"> 
ol start="10">, 
<p [PA AER AEk 创 亚 锦 赛 39 年 最 差 </p></1i> 
<1i>cp> [要闻] 匡 律 宾 洲 美国 增 派驻 菲 军 队 白宫 拒绝 回应 </p></I 
<1i><p>[ 要 闻 ] 高 雄 市 长 陈 菊 访 问 天 津 改称 ' 中 国 ' 为 ' 中 国 大 陆 '</ 
<li><p>[ 本 地 ] 访 民 通宵 排队 见 中 央 巡 视 组 发 觉 对方 是 本 地 口音 < 
<1iy<p>[ 社 会 ] 大 连 行政 执法 局 长 攻 先 亏 被 免 曾 被 实名 举报 </p></ 
<1i><p>[ 财 经 ] 去 年 近 11 万 家 庭 违 规 住 保障 房 5 万 户 被 取消 资格 </F 
<1i><p>[ 体 育 ] 足协 闭 门 2 天 研讨 国足 选 帅 被 告诫 不 得 江 密 </p></ 
<1i><p> [娱乐 ] 寿 体 分 析 解 放 军 新 看 大 区 级 将 领 半数 为 政治 主 官 </p; 
<14><p>[ 社 会 ] 山东 卫生 厅 动 持 案 生 犯 称 单位 如 其 维 可 证 所 </p></] 
</ol> 
</div> 
| </div> 


[91 执行 “文件 > 打开 ″ 命 令 ， 将 “ 源 文 件 \ 第 2 章 ,2-7-1html” 文 档 打 开 。 在 代码 视图 
中 修改 <ol> 标签 ， 设 置 有 序列 表 的 起 始 数 。 


© HTv 5 > 网 页 制作 > 全 程 揭秘 ] 


10 HAREE hke TRENERE 

11. PE IEIEFPZERSEISS4r aa, OSPR 

12. 苯 闻 高雄 市 长 陈 区 访问 天 津 改称 中 国 为 中 国 大 陆 " 
13. 时 地 ] 访 民 通 青 排队 见 中 央 过 视 组 发 觉 对 方 是 本 地 口音 
14.[ 社 会] 大 左 行 区 执法 局 长 葵 先 霜 被 免 兽 被 实名 举报 

15 8122 ES3EIE1153F 8338131988 55 HAARAA 
16. [体育 ] 趾 协 闭 | 天 研讨 因 足 选 帅 禄 告 诚 不 得 捞 密 

17. 喀 乐 ] 煤 笨 分 析 冲 放手 新 亚 大 区 级 将 领 半数 为 政治 主 言 
18。 时 会] 山东 卫生 厅 动 桂 灾 嫌 犯 称 单位 办 其 给 权证 据 


samo 


Etawa 
1 mot EE wma 


[ 02 PT X> 另存 为 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 2 章 \2-7-3.html”。 按 Fl12 
键 在 浏览 器 中 测试 页 面 中 自 定 义 有 序列 表 起 始 数 的 效果 。 


提问 : 列表 可 以 设置 宽度 吗 ? 
答 : 用 户 可 以 在 <ol> 标签 或 <ul> 标签 中 添加 宽度 属性 。 如 果 不 设置 宽 
度 属性 ， 那 么 当 浏览 器 的 宽度 缩小 时 ， 列 表 将 会 自动 进行 换行 。 


_ 自 定义 有 序列 表 的 数值 
在 有 序列 表 中 ， 可 能 会 需要 修改 某 一 个 列表 编号 或 者 隐藏 一 些 列表 项 的 编号 ， 这 种 效 


果 可 以 通过 value 属性 来 对 某 个 列表 项 的 编号 重新 进行 定义 ， 并 且 编号 会 以 新 的 起 始 值 来 
继续 后 来 的 列表 项 。 


mb 实例 34+ 视频 : 定义 新 闻 列 表 数 值 


MSE RERE Eik 创 亚 锦 赛 39 年 最 差 

. FAAARA ERREEN ASEE 
ERREK e PEA PEA 

i. PRA RASH P RAEO 
吐 会 ] 大 连 行政 执法 局 长 摹 先 勃 被 免 曾 被 详 名 举报 
财经 ] 寺 年 近 11 万 家 应 违规 佳 保障 房 ;万 户 被 取消 资格 


[体育 ] 足 协 闭 门 2 天 研讨 国足 选 帅 W ata 
，[ 史 乐 媒体 分 析 解 放 军 新 蕴 大 区 级 将 领 半数 为 政治 主 宫 
[社会 山东 卫生 厅 翅 持 案 培 扎 称 单位 银 其 维权 证 握 


A 操作 视频 : 视频 \ 第 2 章 \2-7-4. swf 


<body> 
<div id="box"> 
<div id="lie"> 
<ol> 
<1i><p>[ 体 育 ] 男 得 惨败 中 华 台北 创 亚 锦 赛 39 年 最 差 </ 
<1i><p> [要 闻 ] 菲律宾 邀 美 国 增 派驻 菲 军 队 白宫 拒绝 回 [ 
<1i_value="5"><p>[ 要 闻 ] 高 雄 市 长 陈 菊 访 问 天 津 改 
I13<P>T 不 邢 ] 芒 民 通 容 排 队 见 中 央 关 视 组 发 觉 对 方 是 > 
<1i><p>[ 社 会 ] 大 连 行政 执法 局 长 磊 先 勃 被 免 曾 被 实名 3 
<1i><p>[ 财 经 ] 去 年 近 11 万 家 庭 违规 住 保障 房 5 万 户 被 了 
<1li><p>f 体 育 ] 足 协 闭 门 2 天 研讨 国足 选 帅 被 告诫 不 得 江 
<1i><p>[ 娱 乐 ] 妊 体 分 析 解 放 军 新 亚 大 区 级 将 领 半数 为 政 
<1i><p>[ 社 会 ] 山东 卫生 厅 动 持 案 巍 犯 称 单位 毁 其 维权 证 


f 源 文件 : 源 文件 \ 第 2 章 \2-7-4 html 


=s 


[执行 “文件 > 打开 ″′ 命令 ， 将 “ 源 文 件 \ 第 2 章 2.7-.l html” 文档 打开 。 在 代码 视图 
中 修改 第 3 个 <li> 标签， 设置 该 列表 项 目的 数值 。 


第 2 章 网 页 基本 HTML 标签 M 


1 K. ii GJ 


5. E amam 

6. [林地] 六 民 通 吉 排 队 见 ! 

了 时 会 ] 关 连 行政 执法 

8. 本 经 去 年 近 11 万 

9.[ 件 育 ] 呈 协 闭 门 2 天 研讨 国足 选 帅 被 告 斌 不 得 泄密 

10. 此 乐 ] 附 体 分 析 解 让 宇 新 于 大 区 级 将 领 半 数 为 政治 主 宫 
于 会 ] 山 东 卫 生 厅 雪 桂 宗 暗 犯 称 单位 名 其 给 权证 据 


TELELE 


(02 PIT X> 另存 为 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 2 章 \2-7-4.html”。 按 F12 
键 在 浏览 器 中 测试 页 面 中 自 定义 有 序列 表 数 值 的 效果 。 


24 
* 


提问 : 可 以 修改 有 序列 表 的 数字 样式 吗 ? 
答 : 有 序列 表 可 以 修改 数字 样式 ， 用 户 可 以 利用 CSS 样式 定义 ol 元 素 
的 font 属性 为 用 户 需要 的 字体 样式 。 


无 序列 表 (ul 元素 ) | 


无 序列 表 不 用 数字 标注 每 个 列表 项 ， 而 采用 一 个 符号 标注 每 个 列表 项 ， 如 圆 黑 点 。 无 
序列 表 由 <ul> 和 </ul> 标签 对 实现 ， 每 个 列表 项 也 是 由 <li> 标签 开始 。 


sb EB 35+ 规 频 : 制作 无 序列 表 | 


A 操作 视频 : 视频 \ 第 2 章 \2-7-5. swf 
<body> 
<div id="box"> 
<div id="1lie"> 
<p> LAHA 1 开 服 </p> 
<p> LEREZ ] 开 服 </p> 
<p> [ÉRA l] 开 服 </p> 
<p> LERZ 1 开 服 </p> 
<Dp>【 龙 狼 迷 城 开 服 <7p> 
= = E </div> 
wana “文件 > 打开 ” 命令 ， 将 “素材 \ 第 2 章 \27501.html” 文 档 打 开 。 在 代码 视图 
中 为 <div id="lie"> 标签 添加 文本 内 容 。 


© MOD ) 


<body> 
<div id="box"> 
<div id="lie"> 
<ul> 
<1i><p>【 真 龙 游 天 ]】 开 服 </p></1i> 
<lix<p> LERS Z] 开 服 </p></1i> 
<1i><p>【 龙 纹 战 鼓 】 开 服 </p></1i> 
<1i><p>【 砍 卉 云霄 】 开 服 </p></1i> 
<1i><p>【 龙 狼 迷 城 ] 开 服 </p></1i> 
</ul> 
</div> 
</div> 
</body> 


CERAR ADIRA RREI 。 将 文件 进 和 保存， 按 F12 键 在 浏览 
器 中 测试 页 面 中 无 序列 表 的 效果 。 


Zo 提问 : 可 以 自 十 六 文字 前 面 的 国 点 加? 
答 : 用 户 可 以 使 用 漂亮 的 小 图 案 代 替 无 序列 表 前 面 的 小 黑 点 ， 通 过 css 
定义 i 属性， 在 CSS mp x: background-image» 


276 dl 定义 列表 


dl 定义 列表 是 一 种 特殊 的 列表 形式 ， 由 <dl>…</dl> 标签 对 实现 ， 包 含 术语 和 描述 两 
部 分 。 术 语 由 <dt> 标签 开始 ， 术 语 的 解释 说 明 由 <dd> 标签 实现 。 


sb 实例 36+ 视频 : 使 用 dl 定义 网 页 公告 列表 | 


eA + 
ees*+ 


A A 操作 视频 : 视频 \ 第 2 章 \2-7-6. swf 


<body> 
<div id="box"> 
<div id=! 


an" 

[热卖 135858 nmesma 
[新 品 ] RE SAO ARE E 
[热卖 ] AAR A MOARE EM 
52155 5MtSLe nit 
【新品 ] 8835 85:59 Sh RRE 
【新 品 ] 眼 部 无 痕 洁 净 露 全 脸 卸 妆 

</div> 
</div> 
</body> 


mman “文件 > 打开 ”命令 ， 将 “素材 \ 第 2 章 \27601.html” 文 档 打 开 。 在 代码 视图 
中 的 <div id="tan"> 标签 下 添加 文本 内 容 。 
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tani 
width:335px; 
height:160px; 
margin:129px 0 0 95px; 


<body> 
<div id="box"> 
<div il 


<dl> 
Zaro AR] cspan></ span AMMA HY SI ar> cay £ Ë Me/da> 


Zato [MB] <span><7 span FE 4 Fi30it B< /ar><caay E Es. frin dii 


<at> AR] <span></ span 8 dR 30038 < a> <aa> RES: < dd> eiii 
<at> [AR] <span></ spa PARA MH Ac / atao £ Ë 8 /da> ioc 
<at> [新 品 ]<spany</span> 青 洁 衣 拓 洁净 晶 露 </dc><dd> 眼 唇 部 站 </dd> 2 
<dr>[ 新 品 ]<span></span> 眼 部 无 痕 洁 邹 露 </dr><dd> 全 脸 扼 妆 </da> height:25px; 
</dl> line-height:2Spx; 
À </div> margin-left:8px; 
</div> 
haqay. border-bottom:lpx solid #c833a9; 


(02 为 刚刚 输入 的 文本 添加 <dl> 标签 、<dt> 标签 、<span> 标签 以 及 <dd> 标签 。 在 代码 
视图 中 找到 名 称 为 #tan 的 CSS 样式 ， 在 其 下 方 输入 名 称 为 #tan dt 的 CSS 样式 ， 并 定义 其 
样式 参数 。 


tan dd( 

float:left; 

width:50px; 

height:25px; 

line-height:25px; 

border-bottom:lpx solid #c833a9; 
} 
#tan span( 

margin-right:10px; — 
} 


[ 03 继续 输入 名 称 为 #tan dd 和 #tan span 的 CSS 样式 以 及 其 样式 参数 。 添 加 
素 ， 完 成 网 站 公告 列表 的 制作 。 


CUCU 


列表 中 的 其 他 元 


提问 : 可 以 将 dd 和 dt 元 素 单独 使 用 吗 ? 

答 : dd 和 dt 元素 是 可 以 单独 使 用 的 ， 在 没有 dl 的 文档 中 ， 单 独 使 用 dd 
元 素 可 以 形成 文本 的 缩 进 效 果 ， 但 这 并 不 是 一 个 有 效 的 HTML 代码 ， 所 以 建议 
不 要 单独 使 用 ， 而 且 在 某 些 浏览 器 中 ， 这 样 做 可 能 会 造成 无 法 预料 的 错误 。 


2.7.7 EAE 


IRETURE, KEIRECAREINRHIR (列表 里 可 以 含有 子 列表 ) 。 通 常 
用 这 种 谤 套 的 列表 ， 反 映 层次 较 多 的 内 容 。 
<h4> 嵌 套 两 层 的 列表 : </h4> 
SO 谋 雪 两 层 的 列表 ， 
<1i> 唐 诗 </1i> 
<1i> 宋 词 </1i> š 
SUS : ales 
<1i> 李 清 照 </1i> 
s ”李清照 
<1i> 如 梦 令 </1i> " 如 梦 邻 
<1i> 车 萨 亩 </1i> . HFA 
</ul> ° 
<1i> 欧 阳 修 </1i> * 元 曲 
</ul> 
<1i> 元 曲 </1i> 
</ul> 


© 5 > 网 页 制作 > 全 程 揭秘 


反 转 序号 值 (reversed BI) | 


HTML 5 新 增 的 reversed 属性 是 一 个 逻辑 值 ， 用 来 表示 有 序列 表 是 否 反 转 序号 显示 ， 
即 按 降序 显示 序号 。 如 下 面 的 定义 : 


<ol reversed> 


<1i> 第 一 个 列表 项 3. 第 一 个 列表 项 
<1i> 第 二 个 列表 项 2. 第 二 个 列表 项 
<1i> 第 三 个 列表 项 1. 第 三 个 列表 项 


</o1> 


2.8 使 用 表格 


表格 由 行 、 列 、 单元 格 3 个 部 分 组 成 , 使 用 表格 可 以 排列 页 面 中 的 文本 、 图 像 及 各 种 对 象 。 
表格 的 行 、 列 、 单 元 格 都 可 以 复制 及 粘贴 ， 并 且 在 表格 中 还 可 以 插入 表格 ， 一 层 层 的 表格 
嵌 套 使 设计 更 加 灵活 。 


2.8.1 表格 简介 


表格 标签 <table> 是 页 面 的 重要 元 素 ， 在 DIV+CSS 布局 方式 被 广泛 运用 之 前 ， 表 格 布 
局 在 很 长 一 段 时 间 中 都 是 最 重要 的 页 面 布 局 方式 。 在 使 用 DIV+CSS 布局 时 ， 也 并 不 是 完 
全 不 可 以 使 用 表格 ， 而 是 将 表格 回归 它 本 身 的 作用 ， 用 于 显示 表格 式 数据 。 


2.8.2 Zii] 


表格 由 4 个 基本 元 素 构成 ， 分 别 为 <table> 标签 、<tr> 标签 、<th> 标签 和 <td> 标签 。 
<table> 标签 用 于 定义 表格 ， 整 个 表格 都 包含 在 <table> 和 </table> 标签 对 中 ; <tr> 标签 用 
于 定义 表格 中 的 一 个 行 ， 它 是 单元 格 的 容器 ， 每 行 可 以 包含 多 个 单元 格 ， 由 <tr> </tr> 
标签 表示 ; <th> 标签 和 <td> 标签 用 于 定义 单元 格 ， 所 有 单元 格 都 放置 在 <tr> 标签 内 ， 每 
个 单元 格 由 <th> 和 </th> 标签 对 或 者 <td> 和 </td> 标签 对 表示 。 


@ 结束 标签 《/tr>、《/th> 和 《/td> 都 是 可 以 省 略 的 ， 但 是 建议 用 户 还 是 
保留 它们 ， 因 为 这 可 以 使 文档 更 加 整齐 。 


第 2 章 网 页 基本 HTML 标签 KJ 


[加 实例 37+ 视频 : 制作 表格 | 


pnn x 
+ @ @ 9 * + elDyrTMLSxEsxasxAsxEs ih -| äi- == P Ra- 
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f 源 文 件 : 源 文件 \ 第 2 章 \2-8-2.html 


[本 六 执行 “文件 > 新建” 命令， 新建 一 个 空白 的 HTML 5 文档 。 在 <body> 标签 下 添加 
表格 元 素 以 及 表格 中 的 内 容 。 


m- G s m - mx + 


[02 PRIT “X> 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 2 章 \2-8-2.html”， 按 Fl12 
键 测试 页 面 的 效果 。 


2 Z sa. 为 祭 么 实例 中 没有 显示 表格 ? 
* 答 : 因为 实例 中 并 没有 定义 表格 的 边框 属性 ， 在 HTML 中 表格 默认 没 
有 边框， 如 果 用 户 希望 表格 显示 边框 ， 可 以 为 <table> 标签 添加 border 属性 ， 
这 些 内 容 将 在 后 面 的 小 节 中 介绍 。 


默认 情况 下 ， 表 格 没有 边框 线 ， 不 过 用 户 可 以 通过 样式 表 为 其 定义 边框 线 ， 其 中 包括 
线条 样式 、 粗 细 和 边框 颜色 等 。 
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BD 实例 38+ 视频 : 定义 表格 样式 | 


二 x 
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A 操作 视频 : 视频 \ 第 2 章 V2-8-3. swf 


m. D s m Q mv, 


f 源 文件 : 源 文件 \ 第 2 章 \2-8-3.html 


<body> 
<table wideh="324" keighr=t: 


<cd> 第 1 名 </ra> 
<cd> 张 三 </cd> 
</tr> 
<tr> 
<cd> 第 2 名 </rad> 
<rq> 李 四 </ra> 
/ery 


<tr> 
<cd> 第 3 名 </rdy 
<ed> 王 五 c/ec> 


— 4 
= ss 


[91 执行 “文件 > 打开 ”命令 ， 将 “ 源 文 件 \ 第 2 章 \2-8-2.html” 文 档 打 开 。 将 光标 插入 
到 <table> 标签 中 ， 为 该 标签 添加 样式 属性 以 及 表格 大 小 属性 。 


ar 


body> 
<table widche"324" helghu="203" style="border:solld 1px #000"> 


<rca>cEeDnEeE> 第 1 名 </EeaEe 


— 
“t> 


[ 02 PP 为 表格 中 的 内 容 添加 <center> 居中 标签 。 继 续 为 第 一 组 <tr> 标签 下 的 <td> 标签 添 
加 样式 属性 以 及 表格 大 小 属性 。 


Bonn- wx + 


测试 页 面 中 的 表格 


[Lo3_P 使 用 相同 的 方法 继续 为 其 他 的 <td> 标签 添加 表格 样式 ， 按 F12 键 


样式 效果 。 
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提问 : 边框 会 影响 表格 的 大 小 吗 ? 

答 : border 属性 设置 的 表格 边框 只 能 影响 表格 四 周 的 边框 宽度 ， 并 不 能 
影响 表格 内 单元 格 之 间 的 尺寸 。 虽 然 边框 的 宽度 设置 没有 限制 ， 但 还 是 建议 
用 户 不 要 将 边框 的 宽度 超过 5px， 因 为 过 宽 的 边框 会 影响 表格 的 整体 美观 。 


28.4 表格 的 标题 


每 一 个 表格 都 可 以 通过 caption 元 素来 对 表格 的 目的 作 一 个 简单 的 说 明 ，caption 元 素 
的 内 容 用 来 描述 表格 的 特征 , 并 且 caption 元 素 必须 紧 接着 table 元 素 的 开始 标签 之 后 被 定义 。 


m KH 39+ 视频 : 定义 表格 标题 


z ajai mi- w 
fü 源 文件 : 源 文件 \ 第 2 章 \2-8-4.html 


= = 


(01 PHA “文件 > 打开 ”命令 ， 将 “ 源 文件 \ 第 2 章 2-8-3.html” 文 档 打 开 。 将 光标 插入 
到 <body> 标签 下 ， 为 表格 添加 居中 标签 对 <center>。 


[ 02 FP 为 表格 中 的 内 容 添加 <caption> 标题 标签 。 继 续 为 第 一 组 <tr> 标签 下 的 <td> 标签 添 
加 样式 属性 以 及 表格 大 小 属性 。 


© 5 > 网 页 制作 > 全 程 揭秘 


VI sn 为 什么 不 直接 使 用 n 标题 标签 来 实现 表格 的 标题 效果 ? 
多 S: 使 用 <caption> 标签 创建 表格 的 标题 是 因为 <caption> 标签 也 是 表 
格 的 一 部 分 ， 如 果 表 格 发 生 移动 ， 或 在 HTML 中 重新 定位 ，<caption> 定义 


的 标题 也 会 随 着 表格 发 生 移动 或 重新 定位 。 


用 户 也 可 以 使 用 figure 元 素 以 及 figcaption 元 素 为 表格 添加 声明 标题 ， 例 如 以 下 的 表 
格 标题 代码 : 
<figure> 
<figcaption> 
<p> 班 级 名 次 </p> 
</figcaption> 
<table> 


</table> 
</figure> 


时 当 table 元 素 是 除了 figcaption 元 素 之 外 figure 元 素 唯一 的 内 容 ， 
那么 最 好 使 用 figcaption 元 素 ， 而 不 是 caption 元 素 。 


天 区 分 单元 格 
也 元 素 和 td 元素 都 是 用 于 创建 单元 格 的 ， 但 是 一 个 表格 可 能 会 包含 两 种 类 型 的 单元 格 ， 
一 种 是 数据 单元 格 ， 另 一 种 是 头 信息 单元 格 。 这 也 是 也 元 素 和 td 元素 的 区 别 ， 也 元 素 用 
于 创建 头 信息 单元 格 ，td 元 素 用 于 创建 数据 单元 格 。 


@ 因为 有 了 th 元 素 和 td 元 素 的 区 分 ， 浏 览 器 就 可 以 使 用 不 同 的 方式 演 染 
单元 格 。 例 如 一 些 浏览 路 特意 将 头 信息 文字 呈现 为 粗 体 。 语 音 合成 器 在 读 出 
两 种 信息 方面 也 会 有 所 不 同 。 


mo 实例 40+ 视频 : 制作 年 级 成 绩 排名 单 1 | 
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f 源 文件 : 源 文件 \ 第 2 章 \2-8-5.html A 操作 视频 : 视频 \ 第 2 章 \2-8-5. swf 


第 2 章 网 页 基本 HTML 标签 


<body> 

<center> 
<table> 
</table> 

</center> 


</body> 
</html> 


TAE XERE AE, MOE—4 J HTML 5 文档 。 将 光标 插入 到 <body> 
标签 下 ， 输 入 居中 标签 对 <center> 以 及 表格 标签 对 <table>。 


<body> 
<center> 
<table width="550" height="320" style="border:solid 1px #000"> 
</table> 
</center> 


soy1e-"border: solid 1px #000"> 


</body> </body> 
</huml> < nmay 


[ 02 P] 将 光标 插入 到 <table> 开始 标签 中 ， 为 其 添加 宽 高 属性 以 及 表格 样式 属性 。 在 
<table> 标签 下 添加 <caption> 表格 标题 标签 以 及 标题 内 容 。 


<body> 


<body> <center> 

<center> 207 style="borderisolid 1px #000"> 
<table width-"550" height-"320" style-"borderisolid 1px #000"> <caption>: 
<capcion> 年 级 名 次 </capcton> <tr> 
<er> <th order:solid ipx #000"y<cenreyy 姓 名 c1cenreryc1rdy 


order: solid ipx #000wyccentery 学 呈 c/ cai 
zderisolid ipx #000"><center>MHB/ce: a> 


ordsziaol5d ipx t000"><center>Mific/oenter></zd> 


orderiaclid 1px #000"><oenter> 姓 名 </cenzer></td> <th 
lid 1px #000"><center> 年 脐 </ca 
lid 1px #000"><center>HER</ce: 

<th style="border:solid 1px #000">ccenter>Mi c/ce 
</tr> 


<td style="borderisolid 1px #000vy<cenrer? 王 wwec/cenceryc/cd> 


SEE <ta orqez;3011Q 1px $000" ><center>177</center></ta> 
</center> <ta o order:so11d ipx #000"><center>=EsMi/centerye/re> 
<ra rder:solid ipx #000"><center>100</center></ td> 
</body> “y 
</html> <jtabie> 
</center> 


[ 03 PÆ <caption> 标签 下 添加 <tr> 表格 行 标签 、<th> 头 信息 单元 格 标签 、border 表格 样 
式 属性 以 及 单元 格 中 的 内 容 ， 并 为 内 容 添加 <center> 居中 标签 。 再 次 输入 一 个 <tr> 表格 行 
标签 , 并 在 该 标签 中 添加 <td> 数据 单元 格 标签 、 表 格 样式 属性 以 及 单元 格 内 容 和 居中 标签 。 


czd aryle="porder:solid 1px #000"><center>Ẹes</centersc/ta> 
od acylerwbazderiaolid 1px #000"><center>265¢/canter></td> 
d style="border :solid 1px #000"><center> = #SM</center></tá> 
tyle="pozrqer:solid 1px $000"><center>100</center></t0> 


<td style-"border:solid 1px #000"><center>#+*</center></td> 


<= mporaer:solia 1px $000"><center>018</center»</t0> 
mporder :solid ipx #000"><center>—#1iEc/center></12> "m 


< mporder; a0lid 1px #000vy<censezy99c/asacery</sa> uu imas INNEAN 
“¿oq Pr 
ed style="bozder:solid pw #000M><centez> Mee c/cencer></td> z 
<td style-"border:solid 1px #000"><center>297</center></t> na kau w al 
c yie==peraerisoiid ipx #000><centezy 三 年 7 斑 c/ centeryc/cay = = 
Te=wborder:saolid lpx $000"><center>92</center></td> z. 17 二 年 8 100 
< ae 265 | 三 年 < 100 
3 acyie=oporaer:aolig 1px 8Doavyccenrery 祭 cd/cenreryc/ra> 
cyle=wbaordsziaalid 1px #000ws<cenrezy300c/ ceareryc/sa> ge % J] = o9 
tyle-"border:solid lp #000"><centez> ZF 6HE</center> </td> 
cyle="border: solld 1px #000"><center>97</center></to> pe | = | = 年 三 四 
| w | Ez 9 
d style-"border:so1id 1px #000"><center>fne</center>c/ta> 
mporaer:soria 1px #000"><cente3933</center></1c> > 
Ë ar oss — % 
mporder: a01id 1px #000"><centers =Æ2}Ec/center></td> li | | 
perder a0lid 1pm #000n> -<center>96¢/oenter></ca> 
ras a 本 


[ 04 P| 使 用 相同 的 方法 制作 表格 中 其 他 的 内 容 。 按 快捷 键 Crs 将 文档 保存 为 “ 源 文件 \ 第 2 


章 \2-8-5.html”， 按 Fl2 键 测试 页 面 中 表格 的 最 终 效果 。 
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2 个 提问 : 为 什么 为 表格 增加 了 居中 标签 后 , 还 要 为 每 个 文本 添加 居中 标签 ? 

Eg 答 : 虽然 整个 表格 在 增加 了 居中 标签 后 ， 可 以 在 浏览 器 中 居中 对 齐 , 但 
是 表格 中 单元 格 里 的 文本 内 容 对 齐 方式 并 不 会 因此 而 发 生 改 变 ， 所 以 如 果 需 
要 文本 也 居中 对 齐 ， 必 须 为 每 个 文本 也 添加 居中 样式 。 


也 元 素 还 可 以 定义 scope 属性 和 headers 属性 ， 使 用 这 两 种 属性 可 以 帮助 非 可 视 化 的 浏 
览 器 和 搜索 引擎 处 理 表 头 信息 。 
@ scope 

scope 属性 用 于 指定 该 th 头 信息 单元 格 的 内 容 用 于 哪些 单元 格 的 表 头 ， 其 属性 值 包括 


col. colgroup. row. rowgroup 和 auto; 


属性 值 含义 
col 该 单元 格 的 内 容 将 作为 当前 列 的 表 头 
colgroup 该 单元 格 的 内 容 将 作为 当前 列 组 的 表 头 
Tow 该 单元 格 的 内 容 将 作为 当前 行 的 表 头 
rowgroup 该 单元 格 的 内 容 将 作为 当前 行 组 的 表 头 
Pe 这 是 scope 属性 的 默认 值 ， 表 示 基 于 上 下 文 环境 ， 该 单元 格 的 
内 容 将 作为 选中 的 一 些 单元 格 表 头 


对 实 例 41+ 视频 : 制作 年 级 成 绩 平均 分 数 单 


s==<— —wsarh — 


m. m rm 


f 源 文件 : 源 文件 \ 第 2 章 \2-8-5-1.html 


A 操作 视频 : 视频 \ 第 2 章 \2-8-5-1. swf 


dth="741" height="328" style="border:solid 1px #000"> 
<cal 年 级 平均 成 绩 </capricny 
<ir 
</center> 


</body> 
</html> 
m 


PR HRE Ee, MEASAN HTML 5 文档 。 将 光标 插入 到 <body> 
标签 下 ， 输 入 <center> 标签 对 、<table> 标签 对 和 <caption> 标签 ， 以 及 表格 的 各 项 属性 。 


第 2 章 网 页 基本 HTML 标签 KÁ 


<caption> 标签 下 输入 <tr 标签 对 以 及 <th> 标签 对 ， 并 为 也 元 素 添加 单元 格 样式 和 
scope 属性 。 继 续 输入 另 一 个 <tr> 标签 对 ， 并 在 该 标签 对 中 添加 也 和 td 元素 以 及 各 个 元 素 
属性 和 单元 格 内 容 。 


-| 


[ 03 > 使 用 相同 的 方法 制作 表格 中 其 他 的 内 容 。 按 快捷 键 Ctrl+S 将 文档 保存 为 “ 源 文件 \ 第 
2 章 \2-8-5-1.html”， 按 F12 键 测试 页 面 中 表格 的 最 终 效果 。 


提问 : 表格 中 可 以 添加 背景 图 像 吗 ? 
答 : 表格 中 可 以 添加 背景 图 像 ， 通 过 在 <table> 标签 中 添加 background 
属性 ， 并 在 属性 值 中 链接 需要 的 背景 图 像 。 


@ headers 


用 户 也 可 以 使 用 headers 属性 对 th TRM td 元 素 进 行 定义 ， 该 属性 可 以 为 单元 格 元 素 
定义 一 个 id 属性 值 。 例 如 ， 用 户 可 以 为 一 个 也 元 素 定义 id， 然后 使 用 headers 属性 为 td 元 
素 指 定 该 id， 这 样 就 可 以 将 该 td 元 素 指定 给 上 面 所 说 的 th 元 素 。 如 下 代码 所 示 : 

<table> 


<caption> 年 级 平均 成 绩 </caption> 
Lp 


<td></td> 
<th id="nl"S> 一 年 级 </td> 


© OAE — J 


<th ld="n2”> 宇 年 级 </Ed> 

<th id="n3"> 三 年 级 </td> 
<Er 
SEPS 

<th id="k2011">2011 年 </td> 
<td headers="n1 k2011">83</td> 
<td headers="n2 k2011">87</td> 
<td headers="n3 k2011">90</td> 
/ED> 
<tr> 

<th id="k2012">2012 年 </td> 
<td headers="nl k2012">90</td> 
<td headers="n2 k2012">83</td> 
<td headers="n3 k2012">88</td> 
</tr> 
在 > 

<th id="k2012">2013 年 </td> 
<td headers="nl k2013">87</td> 
<td headers="n2 k2013">93</td> 
<td headers="n3 k2013">96</td> 
</tr> 
</table> 


上 面 的 代码 首先 为 “一 年 级 、 二 年 级 和 三 年 级 ”三 个 头 信息 定义 id 为 nl、n2 和 
n3， 然 后 定义 2011、2012 和 2013 三 个 头 信息 的 id 为 k2011、k2012 和 k2013， 最 后 通过 
headers 属性 将 每 个 年 级 的 平均 成 绩 数据 指定 给 相应 的 年 和 年 级 上 。 


在 设计 表格 时 ， 设 计 者 可 能 会 需要 合并 其 中 部 分 相 邻 的 单元 格 ， 也 就 是 将 两 个 或 多 个 
相 邻 的 单元 格 合并 成 一 个 单元 格 。 合 并 水 平方 向 和 垂直 方向 的 单元 格 可 以 通过 rowspan 和 
colspan 属性 进行 设置 。 


| * ? © @ ° * |+ semanuneynayaapIsna sas 89 -| g a= 
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f 源 文件 : 源 文件 \ 第 2 章 \2-8-6.html D 操作 视频 : 视频 \ 第 2 章 \2-8-6. swf 


EE 
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Coi 8] 执行 文件 > 打开 ”命令 ， 将 “素材 \ 第 2 章 \28601.html” 文 档 打开 ， 接 F12 键 测 
试 页 面 ， 观 察 页 面 的 效果 。 


[到 站 将 光标 播 太 到 </table> 结束 标签 上 方 。 输 入 <tr> 标签 对 ， 并 在 该 标签 对 中 输入 <th> 
标签 对 以 及 其 中 的 表格 样式 和 单元 格 内 容 。 


zone BHAA 


[05 > 再 次 输入 <td> 标 答对、 表格 样式 属性 以 及 colspan 跨行 属性 ， 接 快捷 键 CuliSlifts， 
将 文档 保存 为 “ 源 文件 \ 第 2 章 \2-8-6.html”， 按 F12 键 测试 页 面 的 效果 。 


W 


提问 : 跨行 或 跨 列 有 什么 作用 ? 
答 : 跨行 或 跨 列 在 实际 工作 中 非常 实用 ， 因 为 有 些 表格 内 容 不 能 完全 放 
在 一 个 单元 格 中 , 这 时 通过 跨行 或 跨 列 就 可 以 将 更 多 的 文字 放 在 一 个 单元 格 中 。 


2.9 本 章 小 结 


本 章 主要 向 用 户 介 绍 网 页 中 HTML 的 基本 标签 和 属性 ， 包 括 HTML 基本 结构 标签 、 
文字 标签 、 图 像 标签 、 列 表 标 签 和 表格 标签 ， 以 及 关于 这 些 标签 的 各 种 属性 。 使 用 这 些 标 
签 和 属性 可 以 制作 出 很 多 效果 丰富 的 网 页 ， 同 时 也 是 学 习 制 作 网 页 的 基础 ， 希 望 用 户 可 以 
认真 学 习 和 了 解 本 章 内 容 ， 以 便 后 面 的 学 习 可 以 更 加 得 心 应 手 。 
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HTML 超 链接 (HyperLink) 是 指 一 个 Web 资源 和 另 
一 个 Web 资源 的 链接 ， 超 链接 有 两 个 端点 和 一 个 方向 : 
链接 开始 于 “ 源 ” 端 并 指向 “ 终 ” 端 。 


[3.1 链接 的 基础 知识 


有 两 个 html 元 素 都 可 以 用 来 定义 链接 : link 和 a, 

(1) link 元 素 只 能 出 现 于 HTML 文档 的 头 部 ( 作为 
head 元 素 的 内 容 )， 定 义 当前 文档 和 另 一 个 资源 之 间 的 联 
系 ， 虽 然 不 显示 ， 但 会 被 浏览 器 泻 染 。 

(2) a 元 素 只 能 出 现 于 文档 的 主体 部 分 ( 作为 body 元 
素 的 内 容 )， 它 定义 了 当前 文档 中 某 个 区 域 与 另 一 个 资源 
之 间 的 联系 。a 元 素 的 内 容 ( 文本、 图像 等 ) 将 被 浏览 器 


加 了 解 什么 是 超 链接 突出 呈现 。 
例如 ，a 元 素 用 来 定义 页 面 中 文本 的 超 连接 ， 其 基本 
M 熟悉 基本 链接 的 定义 语法 如 下 : 
<a href="URL"> 超 链接 的 文字 </a> 
[加 了 解 链接 路 径 其 中 URL 是 超 链接 指向 的 目标 网 页 地 址 ，" 超 链接 
的 文字 " 是 加 上 了 超 链接 的 正文 。 如 下 面 的 一 行 定义 : 
M 认识 内 部 链接 <a href="http://www.taobao.com"> 链 接 到 淘宝 </a> 
掌握 锚 点 链接 a 元 素 定义 的 链接 不 可 以 被 嵌 套 ， 虽 


然 浏览 器 仍然 会 呈现 。 也 就 是 说 ，a 元 素 不 能 
| $ 包含 其 他 a TR, link 元 素 同 样 也 不 能 嵌 套 。 

浏览 器 突出 显示 带 有 超 链接 的 文字 , 它们 带 有 下 划 线 ， 
当 鼠 标 单 击 一 下 ， 将 会 跳 转 到 http://www.taobao.com。 


使 用 Tab 键 导 航 到 这 个 超 链接 文字 上 ， 可 以 发 现 这 段 
文字 周围 会 出 现 突出 显示 的 矩形 。 大 部 分 的 移动 设备 上 网 
会 采用 类 似 Tab 键 导 航 的 方式 将 焦点 移动 到 超 链 接 上 。 
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时 创建 链接 之 前 ， 一 定 要 清楚 文档 相对 路 径 、 站 点 根 目录 相对 路 径 以 及 绝 
对 路 径 的 工作 方式 。 
32 定义 基本 链接 


<a> 链接 是 基本 链接 ， 出 现 于 文档 的 主体 部 分 , 使 用 鼠标 单 击 可 以 跳 转 到 另 一 个 文档 。 
下 面 介绍 <a> 元 素 的 更 多 功能 。 

在 文档 中 可 以 创建 以 下 几 种 类 型 的 基本 链接 。 

(1) 电子 邮件 链接 : 新 建 一 个 收 件 人 地 址 已 经 填 好 的 空白 电子 邮件 。 

(2) 空 链接 和 脚本 链接 : 使 用 户 能 够 在 对 象 上 附加 行为 ， 或 者 创建 执行 JavaScript 代码 
的 链接 。 

(3) 链接 到 其 他 文档 或 文件 ( 如 图 像 、 影 片 、PDF 或 声音 文件 ) 的 链接 。 

(4) 锚 点 链接 ， 跳 转 至 文档 内 特定 位 置 。 


PAR 定义 链接 的 目标 URL (href 属性 ) 
在 <a> 元 素 内 添加 href 属性 ， 用 于 指定 超 链 接 目标 的 URL， 起 始 标签 与 结束 标签 之 间 
的 文本 就 会 成 为 网 页 中 的 超 文本 内 容 。 
在 浏览 器 窗口 ， 如 果 这 些 超 文本 被 访问 者 单 击 ， 就 会 切换 至 链接 文本 的 目标 URL, H 
标 URL 既 可 能 是 另 一 个 文档 ， 也 可 能 是 本 文档 的 其 他 位 置 。 如 下 面 的 链接 : 
<a href="http://www.taobao.com/"> 链 接 到 淘宝 </a> 
再 看 下 面 的 链接 ， 它 链接 到 当前 文档 中 的 一 个 锚 点 : 


<a href="#sectionl"> 第 二 段 </a> 


定义 链接 的 目标 窗口 (target 属性 ) 


在 <a> 元 素 内 添加 target 属性 ， 定 义 链接 打开 的 目标 窗口 或 框架 ， 如 下 面 的 定义 将 会 
打开 一 个 新 窗口 导航 到 taobao 的 网 站 : 
<a href="http://www.taobao.com/" target=" blank"> 链 接 到 淘宝 </a> 


时 如 果 在 网 页 内 定义 了 框架 ， 还 可 以 为 框架 窗口 进行 命名 ， 这 样 做 就 可 
以 要 求 链接 目标 在 指定 的 框架 窗口 内 打开 。 


属性 值 功能 描述 
_blank 将 链接 的 文档 载 入 一 个 新 的 、 未 命名 的 浏览 器 窗口 
将 链接 的 文档 载 入 包含 该 链接 的 框架 的 父 框架 集 或 窗口 。 如 
_parent 果 包 含 链 接 的 框架 没有 嵌 套 ， 则 相当 于 _top; 链接 的 文档 载 
入 整个 浏览 器 窗口 
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( 续 表 ) 
属性 值 功能 描述 
本 将 链接 的 文档 载 入 链接 所 在 的 同一 框架 或 窗口 。 此 目标 是 默 
认 的 ， 所 以 通常 不 需要 指定 它 
_top 将 链接 的 文档 载 入 整个 浏览 器 窗口 ， 从 而 删除 所 有 的 框架 
@ 除了 上 面 列 出 的 保留 名 称 可 以 使 用 下 划 线 作为 开头 ， 其 他 的 自 定义 目标 


名 称 必须 以 字母 开始 (az 或 者 A“Z) ， 并 且 遵 循 id 属性 的 属性 值 定义 规定 ， 
否则 ， 用 户 浏览 器 会 忽略 该 目标 名 称 。 


| 3.2.3 | 定义 链接 的 提示 信息 (title 属性 ) 


在 <a> 元 素 内 添加 title 属性 ， 指 明 该 链接 的 信息 ， 当 鼠标 指针 移 到 该 链接 时 ， 显 示 该 
链接 的 说 明 ; 如 果 有 屏幕 阅读 程序 ， 屏 幕 阅读 程序 就 会 读 出 该 链接 的 说 明 。<a> 和 <link> 
元 素 都 可 以 使 用 该 属性 。 

例如 下 面 的 代码 为 <a> 元 素 链接 定义 了 title 属性 : 

<a href="http://www.taobao.com/" title=" 这 将 前 往 淘宝 网 站 "> 链接 到 淘宝 </a> 

当 鼠 标 指针 移动 到 文字 上 去 时 ， 指 针 图 标 改 为 手 形 ， 并 且 会 出 现 一 个 提示 框 ， 提 示 框 
中 会 出 现 title 属性 的 值 。 


Ee=== =u 
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在 <a> 元 素 内 添加 hreflang 属性 ， 指 定 被 链接 文档 的 语言 ， 因 为 被 链接 文档 可 能 用 各 
种 语言 编写 。 


@ 通过 href lang 属性 附加 的 知识 提示 ， 用 户 浏览 器 能 够 避免 呈现 给 用 户 
的 是 垃圾 人 信息， 相反， 它们 既 可 以 对 必要 位 置 的 文档 做 出 正确 的 陈述 ， 也 可 
以 提示 用 户 那个 文档 可 能 无 法 阅读 并 指出 原因 。 


3.3 链接 路 径 


HTML 初学 者 会 经 常 遇 到 这 样 一 个 问题 ， 如 何 正确 引用 一 个 文件 ? 怎样 在 一 个 HTML 网 
页 中 引用 另外 一 个 HTML 网 页 作为 超 链接 (hyperlink) 每 个 网 页 都 有 一 个 唯一 的 地 址 ， 称 为 
统一 资源 定位 符 (URL) 。 要 正确 地 创建 链接 ， 就 必须 了 解 链接 与 被 链接 文档 之 间 的 路 径 。 
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3.3.1 绝对 路 径 


HTML 绝对 路 径 (absolute path) 指 带 域名 的 文件 的 完整 路 径 。 绝 对 路 径 和 链接 的 源 端 
点 无 关 。 只 要 网 站 的 地 址 不 变 ， 无 论文 档 在 站 点 中 如 何 移动 ， 都 可 以 实现 正常 跳 转 而 不 会 
发 生 错 误 。 

如 果 注 册 了 域名 www.admin6.com/html， 并 申请 了 虚拟 主机 ， 虚 拟 主机 提供 商 将 会 提 
供 一 个 目录 ， 例 如 www， 这 个 www 就 是 网 站 的 根 目录 。 

在 www 根 目 录 下 放 了 一 个 文件 index.html， 这 个 文件 的 绝对 路 径 就 是 http://www. 
admin5.com/index.htmll 

在 www 根 目 录 下 建 了 一 个 目录 叫 html tutorials， 然 后 在 该 目录 下 放 了 一 个 文件 index. 
html， 这 个 文件 的 绝对 路 径 就 是 http://www.admin5.com/html/html_tutorials/index.html, 
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相对 路 径 ， 对 同一 站 点 中 的 链接 来 说 ， 使 用 相对 路 径 是 一 个 很 好 的 方法 ， 可 以 避免 绝 
对 路 径 的 缺点 。 
1. 如 何 表示 同 级 目录 的 文件 
<a href="3.html"> 同 目录 下 文件 间 互 相 链 接 </a> 
2. html 和 3.html 在 同一 个 文件 夹 下 ， 如 果 2.html 链 接 到 3.html, 可 以 在 2.html 中 这 样 写 : 
<a href="../1.html"> 链 接 到 上 级 目录 中 的 文件 </a> 
3. html 和 3.html 是 1.html 的 下 级 目录 中 的 文件 ， 如 果 在 1.html 中 链接 到 2.html， 可 
以 在 1.html 中 这 样 写 : 
<a href="first/2.html"> 链 接 到 下 级 目录 (first) 中 的 文件 </a> 


@ 插入 图 像 时 ， 使 用 图 像 的 绝对 路 径 ， 图 像 在 远程 服务 器 而 不 在 本 地 硬盘 
中 ， 无 法 在 文档 窗口 中 查看 该 图 像 。 此 时 ， 只 能 在 浏览 器 中 预览 该 文档 ， 所 
以 对 图 像 尽量 使 用 相对 路 径 。 


3.4 内 部 链接 


内 部 链接 是 指 同一 网 站 域名 下 的 内 容 页 面 之 间 互 相 链接 ， 如 频道 、 栏 目 和 内 容 页 面 之 
间 的 链接 ， 乃 至 站 内 关键 词 之 间 的 Tag 链接 都 可 以 归 类 为 内 部 链接 ， 因 此 内 部 链接 也 可 以 
称 为 站 内 链接 。 


时 当 在 网 页 中 创建 内 部 链接 时 ， 一 般 不 会 指定 链接 文档 的 完整 URL， 而 是 
指定 一 个 相对 当前 文档 或 站 点 根 文 件 夹 的 相对 路 径 。 


内 部 链接 与 自身 网 站 页 面 有 关 。 合理 安 排 内 部 链接 ， 尤 其 是 大 型 网 站 ， 合 理 的 内 部 链 
接 部 署 策略 同样 可 以 极 大 地 提升 网 站 的 SEO 效果 。 
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PRG 


D 
| amam 
£20n00 a 
* 图 Be mucmawos Osmi DEEE DID @rewoOo-Ce. 


ARRA 


a Ge 


DA 操作 视频 : 视频 \ 第 3 章 \3-4-1. swf 


f 源 文件 : 源 文件 \ 第 3 章 \3-4-1.html 
>a. gme] 3-4-Lhtml x 
拆 分 | 设计 实时 视图 LQ. O. 50. 


EG! 


Dw m o a 


<meta charset="utf-8"> 
<zicle> 内 部 链接 </citle> 


</head> 


<body> 
<p> 
北京 景点 


[DLP 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 


[91 p) 
<body> 标签 下 输入 内 容 。 


BE 3 .< href="3"> 香山 
= 执行 “文件 > 保存” 命令， 将 其 保存 为 TERES 章 \3-4-1. 
html”， 按 F12 键 测试 页 面 效果 。 
提问 : 内 部 链接 主要 使 用 什么 路 径 ? 
一 般 不 会 指定 链接 文档 的 完整 URL 


?@ aa ma 
答 : 在 网 页 中 创建 内 部 链接 时 ， 
而 是 指定 一 个 相对 当前 文档 或 站 点 根 文 件 夹 的 相对 路 径 。 


3.5 锚 点 链接 
锚 点 链接 可 以 将 浏览 者 快速 带 到 指定 位 置 。 当 网 页 页 面 过 长 时 ， 可 以 使 用 锚 点 链接 
通过 点 击 命名 锚 点 ， 不 仅 让 我 们 能 指向 文档 ， 还 能 指向 页 面 的 特定 段落 。 
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354 建立 错 点 


Ra men a, ss ss pe A 首先 要 


<a_name=" 锚 点 名 称 "></a> 


锚 点 名 称 命名 规则 是 以 字母 开头 的 数字 或 字母 的 随意 组 合 ， 利 用 锚 点 名 称 可 以 链接 到 
任意 位 置 ， 下 面 介 绍 如 何 建立 锚 点 。 


Ë 


ñ Sht. 源 文件 \ 第 3 章 \3.5-1 html A 操作 视频 ; 视频 \ 第 3 章 \3-5-1, swf 


[91 Phi X> 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


和 在 “插入 ” TETE “命名 锚 记 ”按钮 ， 在 弹出 的 对 
话 框 中 输入 锚 记 名 ， 单 击 “ 确 定 ”按钮 。 


— o C 


© CUOMO J 


1 | #-4 5824 554 


iiè 


= 


[ 03 PE BHBF1002 EUREMA, 执行 “文件 > 保存 " 命令 , 将 其 保存 为 “ 源 文件 \ 第 
3 章 \3-5-1.html”， 按 F12 键 测试 页 面 效果 。 
Q ZW =a 锁 点 链接 与 超 链接 有 什么 区 别 ? 
多 答 : HTML 也 是 超 链 接 的 一 种 ， 使 用 错 点 不 仅 可 以 将 链接 指向 一 个 特定 
文档 页 面 ， 还 可 以 准确 地 指向 该 页 面 中 的 某 一 个 特定 的 段落 ， 是 精准 链接 的 
便利 方法 ， 使 链接 对 象 更 加 接近 焦点 。 
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建立 了 锚 点 后 ， 就 可 以 创建 到 锚 点 的 链接 ， 需 要 用 # 号 以 及 锚 点 的 名 称 作为 Href 属性 
语法 如 下 : 

<a href="# 销 点 名 称 ">…</a> 


大 实例 45+ 视频 : 建立 锚 点 链接 


Temm El 
*+ogenoswn- yr 
| @ mama Derne Bis rm 
STEFEN 
下 h 
zx 
Ex 
CO zam m. Gon D - w + Ë i 
f 源 文件 : 源 文件 \ 第 3 章 \3-5-2. html D 操作 视频 : 视频 \ 第 3 章 \3-5-2. swf 
E cun <title> 无 标题 文档 </title> 
</head> 
| <body> 
<p><a href="#name1"> 第 一 章 </a> 
第 二 章 第 三 章 
pike 
<p> 上 文 <a name="namel" id="name1"></a></p> 
<p>&nbsp;</p> 
<p> 正 文 <a name="name2" id="name2"></a></p> 
<p>&nbsp;</p> 
En Dase se ars <p EX<a name="name3" id="name3"></a></p> 
[ukum uama </body> 
c= = </html> 


[91 P| 执行 “文件 > 打开 ”命令 ， 打 开 3-5-1.html 文档 。 切 换 到 代码 视图 中 ， 修 改 原 来 的 
代码 内 容 。 


EE 
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<body> 
<p><a href="#name1"> 第 一 章 </a> 
<a href="#name2"> 第 二 章 </a> 
<a href="#name3"> 第 三 章 </a> 
</p> 
<p> 正 文 <a name="name1" id="name1"></a></p> 
<p>&nbsp;</p> 
<p> 正 文 <a name="name2" id="name2"></a></p> zx 
<p>&nbsp;</p> 
<p> 正 文 <a name="name3" id="name3"></a></p> 
</body> 
</html> ar 


02 使 用 相同 的 方法 输入 其 他 代码 ， 执 行 “ 文 件 > 保存 ” 命令 ， ARRES er 
3 章 \3-5-2.html”， 按 Fl12 键 测试 页 面 效果 。 


® 创建 锚 点 链接 ， 选 择 要 建立 链接 的 文本 或 图 像 ， 在 属性 面板 的 链接 中 输 
入 一 个 # 号 和 锚 点 名 ， 例 如 #name1。 


提问 : 为 什么 有 些 锚 点 在 某 些 时 候 突然 不 能 正常 跳 转 了 ? 
答 : 如 果 链 接 的 锚 点 已 经 在 计算 机 屏幕 中 可 见 ， 那 么 浏览 器 就 不 会 再 进 
行 跳 转 。 另 外 ， 如 果 链 接 的 锚 点 在 屏幕 的 底部 ， 那 么 浏览 器 也 不 能 跳 转 到 该 
锚 点 ， 因 为 浏览 器 已 经 到 了 页 面 底部 ， 不 可 能 继续 向 下 跳 转 。 


(353 ESETA 

锚 点 链接 不 但 可 以 链接 到 同一 页 面 ， 也 可 以 在 不 同 页 面 中 设置 ， 需 要 在 锚 点 名 称 前 添 
加 文件 所 在 的 位 置 。 

语法 : 

<a _ href=" 链 接 的 文件 地 址 # 锚 点 名 称 ">…</a> 


mb 实例 46+ 视频 : SSS 的 错 点 


| wawa 

* > e e o O[# ni wam -|E =s PRD- 

* | 轩 3swmmsnusn OPEP DARE DIN 图 Fniaovorcaa O) Potene » 
商品 名 称 : 


华 面 电脑 q 
产品 特点 ， 
胡言 区 而 的 上 其 ， 精 它 设 计 | 
ĝ- RE TRET 

A . 


penas ED vps FE FREN oB 
RG 34 CMA 262-358 cm 重量 的 
| meus ESERE Do FERK ERSE 


Marya AAEE NBA NOSES NATEN 国 - 口 o zz 四 | oos + 


f 源 文件 : 源 文件 \ 第 3 章 \3-5-3.html A 操作 视频 : 视频 \ 第 3 E \3-5-3. swf 


q sepse 


© HTv 5 > 网 页 制作 > 全 程 揭秘 ] 


<body> 
<table width="600" border="0" align="center" cellspad 
<tr> 


<ta colspan="3"> 华 硕 电脑 是 一 款 大 众 价位 集美 观 和 实用 于 一 身 


*ngacssa, SER. FRNTRHEREN: 
EUME. CEHARE: PELAMI ESEERE I 
</tr> 
<tr> 
<td><a href="3-5-3-1.html#1"> 商 品名 称 </a></ta> 
<td><a href="3-5-3-1.html#2"> 产 品 特点 </a></td> 
<td><a href="3-5-3-1,html#3"> 产 品 规格 </a></ta> 
</tr> 
</table> 


</body> 
</html> 


Co 内 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 ， 将 其 保存 为 “ 源 文件 \ 第 3 章 \3-5-3.html”， 使 用 相同 的 方法 创 
建 并 保存 “ 源 文 件 \ 第 3 章 \3-5-3-1.html”。 


a — — 
— ` =< = 
< + @ @ ° O + nmm i - | Ë RD: a <+ em" oom RD: Fa 
|; sos ew maen a= ease ov ||: i sassa aa p ua 
= 
PAAR- PANERA RR R WARNE. 
商品 名 称 产品 种 点 Faik 
“an 
lis 人 
| 有 着 先天 性 的 优势。 比 上 代 
CI TT -EE CT EE 


[02_>] 按 F12 键 测试 “ 源 文件 \ 第 3 章 \3-5-3.html” 页 面 效 果 ， 单 击 锚 点 即 可 链接 到 3-5-3-1 html 
网 站 页 面 。 


Q ZY 所 间 ， 笛 点 链接 经 常会 使 到 四 ? 
多 答 : 销 点 链接 常常 用 于 一 些 庞大 且 烦 正 的 网 站 页 面 ， 通过 单 击 命名 锚 点 ， 
能 够 快速 切换 到 网 页 特定 的 位 置 ， 例 如 快速 回 到 页 面 首页 和 回 到 页 面 项 部 或 
切换 到 页 面 尾部 。 


.3.6 外 部 链接 


外 部 链接 是 指 由 用 户 的 网 站 跳 转 到 别 的 网 站 的 链接 方式 ， 或 别 的 网 站 跳 到 你 的 网 站 的 
链接 。 外 部 链接 也 称 “ 反 向 链接 ”或 “导入 链接 ”， 像 大 部 分 的 友情 链接 。 

高 质量 的 外 部 链接 指 和 你 的 网 站 建立 链接 的 网 站 知名 度 高 ， 访 问 量 大 ， 同 时 相对 的 外 
部 链接 较 少 ， 有 助 于 快速 提升 网 站 的 知名 度 和 排名 。 


361 链接 到 外 部 网 站 


跳 转 到 当前 网 站 之 外 的 资源 中 , 像 友情 链接 、 大 部 分 搜索 结果 都 是 链接 到 外 部 网 站 的 ， 
下 面 介绍 它 的 语法 。 
语法 : 


<a href="http://:-" ”>…</a> 


EE 


第 3 章 建立 超 链接 P 


[ 戎 实例 47+ 视频 : 创建 友情 链接 


A 操作 视频 : 视频 \ 第 3 章 \3-6-1. swf 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; 
<title> 网 站 外 部 树 接 </title> 


</head> 


<body> 

<p> 友 情 伴 接 : </p> 

<p><a href="http://www.baidu.com"> 百 度 </a></p> 
<p><a href="http://www.sohu.com"> 搜 括 </a></p> 
<p><a hret="http://www.google.com">google</a></p> 
<p><a href="http://www.sina.com"> 新 浪 </a></p> 


<body> 标签 下 输入 内 容 。 


Er = 
° O [E menma -a 站 


* mur Sumen Q epp Drame in Tmi: cme [ewe > | 
Atuq, 


[02 Pp] 执 行 “ 文 件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 3 章 A3-6-1.html”, f F12 键 
测试 页 面 效 果 ， 单 击 链接 ， 跳 转 到 相应 的 网 页 。 


4 @: = er m- 2 ç z mi ne +j a 


提问 : <a> 元 素 可 以 进行 嵌 套 吗 ? 

答 : 用 <a> 元 素 定义 的 链接 不 可 以 被 嵌 套 ， 也 就 是 说 a 元 素 中 不 可 以 包 
含 其 他 的 <a> 元 素 。 例 如 <a href="123.html"> 一 个 链接 <a href="456.html"> 
另 一 个 链接 </a></a>。 


362 链接 到 FTP 


FTP 是 指 文件 传输 协议 ， 使 得 主机 间 可 以 共享 文件 。 一 个 FTP 站 点 在 服务 器 上 通常 包 
含 一 些 允 许 上 传 和 下 载 的 文件 目录 , 里 面 有 共享 的 文件 。 FTP 客户 机 可 以 给 服务 器 发 出 命令 ， 


四 HTML 5 > 网 页 制作 > 全 程 揭秘 


完成 下 载 文件 、 上 传 文件 、 创 建 或 改变 服务 器 上 目录 的 操作 。 
语法 : 
<a href="ftp://ftp 地 址 ">…</a> 


=b 实例 48+ 视频 : 创建 FTP 链接 | 


A 操作 视频 : 视频 \ 第 3 章 \3-6-2.swf 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; c 
<title> 无 标题 文档 </title> 

</head> 


<body> 
<a href="ftp://ftp.pku.edu.cn"> 进 入 北京 大 学 的 FIP 网 站 </a> 
</body> 
</html> 


Co 六 执行 “文件 > 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


pr 京 大 学 的 smz 网 站 


B- Gos D - mx + E as E B- Bo z D - wre 


[ 92 PRIT ARE G, BEREA ALH 3 章 \3-6-2.html”， 按 Fl12 键 
测试 页 面 效 果 ， 单 击 链接 ， 跳 转 到 FTP 站 点 。 


第 3 章 建立 超 链接 PM 


提问 : 使 用 FTP 需要 什么 特殊 的 要 求 吗 ? 

答 : 大 部 分 的 FTP 网 站 都 需要 一 个 用 户 名 和 密码 才能 进入 网 站 。 如 果 
用 户 希望 FTP 空间 设置 为 开放 文件 ， 那 么 用 户 可 以 将 FTP 空间 的 用 户 名 和 
密码 公开 ， 这 样 浏览 者 在 连接 你 的 FTP 空间 时 ， 才 可 以 进行 下 载 或 上 传 。 


CK 链接 到 Telnet 
Telnet 是 Internet 远程 登录 服务 的 标准 协议 和 主要 方式 ， 提 供 了 在 本 地 计算 机 上 完成 远 
程 主机 工作 的 能 力 ， 常 常用 来 登录 一 些 BBS 网 站 和 Telnet 站 点 。 
<a href="telnet:// 地 址 ">…</a> 


3.6.4 


如 果 要 在 网 站 中 提供 下 载 , 可 以 使 用 下 载 文件 链接 , 只 需 单 击 该 链接 , 就 可 以 下 载 文件 。 
简单 地 说 ， 就 是 一 个 索引 ， 就 好 像 你 可 以 通过 一 本 书 的 目录 所 对 应 的 页 码 ， 在 这 本 书 中 找 
到 对 应 于 目录 的 内 容 。 

<a href=" 文 件 地 址 ">…</a> 
语法 : 


<a href="ftp://ftp 地 址 ">…</a> 


m KH 49+ 视频 : 下 载 数据 


下 载 文件 


目标 网 址 。 file///F/MaryAAAN%E6%BAX90%E6X96X87%E4%B8B%B6/ SEW 


保存 下 ”CNUsers\AdministatonDesktop\wpf\ -| sma. 
文件 各 :天空 软 件 ,exe 
文件 大 小 5413 KB , C SRS: 89782 MB 
HES 
打开 保存 取消 Pt 
f 源 文件 : 源 文件 \ 第 3 章 \3-6-4. html S) 操作 视频 : 视频 \ 第 3 章 \3-6-4. swf 
= 一 二 <'DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit: 


http://www. w3.org/TR/xhtm11/DTD/xhtm11-transitional 
<html xmlns="htcp://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; i 
<cicle> 下 载 文件 </cicle> 

</head> 


<body> 


<p> 
<p> 下 载 文件 示范 </p> 

<p><a href=" 村 料 \ 放 飞 .avin>\ 放 飞 .avi</a></p> 
<p><a nret=" Hth ČH .png"></a>@H .png</p> 

<p><a href=" 村 料 \ 天 空 软 件 .exe"></a> 天 空 软件 .exe</P> 
<p><a href=" 村 料 \ 真 心 的 人 .rar"></a> 真 心 的 人 .rar</p> 


[Lo1 P| 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 
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Fm 加 
© e e[* i= n -| ZEE TER k 
k s= masanasa Germ DETE pin @!-—=DG-cs 
TEDT Eii fñe///rF./MayAAA/%E6%BA%90%E6%96%87%E4%BB%B6, EF] 
tei 
Atho B` CAUsers Administrator Desktop\wph -| sex. 
Erta 
Pryn 文件 各 | FER 
文件 大 小 4 了 3 KB , C SERS 89782 ME 
HINTA 
n eam soe B C @ z D|- mv + 打开 s= Rs 


(02 PJI AE RE G, B3UR2 BUES 3 82 A3-6-A html”, j F12 8Ë 
测试 页 面 效果 ， 单 击 链接 ， 转 到 文件 下 载 对 话 框 。 


提问 : 所 有 的 文件 都 可 以 进行 下 载 吗 ? 

答 : 并 不 是 所 有 的 文件 都 可 以 进行 下 载 ， 如 果 是 txt 或 jpg 这 种 计算 机 
自 带 软 件 的 文件 格式 ， 点 击 链接 后 ， 并 不 会 弹出 下 载 框 ， 而 是 直接 将 其 打开 。 
如 果 用 户 希 望 这 些 文件 也 可 以 实现 下 载 ， 可 以 将 其 进行 压缩 或 其 他 操作 。 


3.7 本 章 小 结 


在 设计 制作 网 站 页 面 时 ， 不 仅 要 注重 页 面 的 整体 美感 ， 还 要 注重 页 面 的 实用 性 ， 网 站 
链接 是 一 个 网 站 的 灵魂 ， 用 户 不 仅 要 知道 如 何 去 创 建 页 面 之 间 的 链接 ， 更 要 知道 这 些 链 接 
路 径 形式 的 真正 含义 。 

在 HTML 中 ， 用 户 可 以 为 文字 、 图 像 和 多 媒体 等 文件 建立 链接 ， 本 章 对 这 些 相 关 的 内 
容 进行 了 详细 介绍 ， 希 望 用 户 能 够 认真 掌握 与 学 习 ， 为 后 面 更 深层 次 的 学 习 打下 基础 。 


第 4 章 使 用 canvas 


i 


HTML 5 新 增 的 元 素 canvas 元 素 ， 是 一 个 非常 
要 的 元 素 ， 通 过 canvas 元 素 可 以 绘制 出 丰富 多 彩 的 图 形 、 
图 像 和 动画 ， 本 章 将 对 canvas 元 素 进行 详细 的 讲解 。 


4.1 关于 canvas 元 素 


HTML 5 版 本 之 前 ， 如 果 需 要 在 网 页 中 绘制 图 形 ， 必 
须 使 用 Flash 等 插件 ，HTML 5 新 增 的 canvas 元 素 可 以 在 
不 需要 任何 插件 的 前 提 下 绘制 图 形 。 


4.44 


canvas 元 素 是 Apple 在 Safari 1.3 Web 浏览 器 中 引入 
的 ， 随 后 ，Firefox 1.5 浏览 器 和 Opera 9 浏览 器 也 开始 支 
持 canvas 元 素 。 

canvas 元 素 是 为 了 客户 端 矢 量 图 形 而 设 计 的 ， 它 没有 
行为 ， 但 可 以 通过 JavaScript 脚本 实现 图 形 的 绘制 。 


TEPA canvas 的 使 用 方法 


在 HIML 5 中 使 用 canvas 元 素 ， 首 先 必 须 追 加 <canvas> 
标签 ， 然 后 通过 JavaScript 进行 绘制 。 
@ 获取 canvas 元 素 
使 用 canvas 元 素 ， 必 须 在 HTML 5 中 配置 <canvas 
标签 ， 为 了 JavaScript 可 以 使 用 <canvas> 标签 ， 必 须 在 
<canvas> 标签 中 追加 id， 基 本 格式 如 下 : 
<canvas id="myCanvas"></canvas> 
@ 获取 绘图 用 的 上 下 文 
仅仅 获取 了 canvas 元 素 ， 没 有 由 canvas 元 素 获取 绘 
图 用 的 上 下 文 也 是 无 法 绘制 图 形 的 ， 获 取 绘 图 用 的 上 下 文 
的 基本 格式 如 下 : 


<script type="text/javascript"> 


var canvas=document .getElementById('myCanvas'); 
</script> 


>” 使 用 上 下 文 方法 和 属性 进行 绘图 
获取 了 绘图 用 的 上 下 文 之 后 ， 即 可 调用 其 方法 或 属性 
进行 具体 图 形 的 绘制 了 ， 基 本 格式 如 下 : 


<canvas id="myCanvas"></canvas> 
<script type="text/javascript"> 


掌握 canvas 的 基本 概念 


加 


q 


了 解 canvas 的 绘制 方法 


M 掌握 绘制 图 形 方法 


多] 掌握 绘制 文本 方法 


熟练 掌握 编辑 图 像 方 法 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


var canvas=document.getElementById('myCanvas'); 
var ctx=canvas.getContext('2d'); 
ctx.fillStyle='#FF0F00'; 

ctx.fillRect (20,20, 60,80); 

</script> 


4.2 绘制 矩形 


在 HTML 5 中 ， 可 以 使 用 canvas 元 素 轻松 绘制 矩形 ， 用 于 绘制 矩形 的 3 个 函数 分 别 是 
fillRect, strokeRect 和 clearRect。 
@ fillRect 


使 用 fillRect 方法 可 以 绘制 一 个 矩形 填充 ， 基 本 语法 如 下 : 


Var ctx = canvas.getContext("2d"); 
ctx.fillstyle = "rgba(0, 0, 200, 0.5)"; 
ctz: ELLIRECE (30 30; 55; SO 

@ strokeRect 


使 用 strokeRect 方法 可 以 绘制 一 个 矩形 轮廓 ， 基 本 语法 如 下 : 


var ctx = canvas.getContext ("2d"); 
ctx-frillsStvyle = "rgbal0, 0, 200, O05)™ 
Ctx- SErokaeRect (30; 30, 55, SQ); 
@ clearRect 


使 用 clearRect 方法 可 以 清除 指定 矩形 区 域 中 的 图 形 ， 使 得 矩形 区 域 中 的 颜色 全 部 变 为 
透明 ， 基 本 语法 如 下 : 
var ctx = canvas.getContext ("2d"); 


Ctx-FillSty]e = "roba (0, 0; 200; 0-5)"; 
ctx-clearRect (30, 30, 55; 50); 


g 


x 和 y 指定 矩形 左上 角 ( 相对 于 原点 ) 的 位 置 ，width height 是 矩形 
的 宽 和 高 。 


m> 实例 50+ 视频 : 使 用 canvas 绘制 矩形 


l< e. = m. mus. 


f 源 文件 : 源 文件 \ 第 4 章 \4-2 html A 操作 视频 : 视频 \ 第 4 章 \4-2. swf 


第 4 章 使 用 canvas f 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-38"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
canvas id-"canvas" width="220" height="150" 


Ta 
</body> 
</html> 


- 


[ 01 Pj 在 Dreamweaver 中 新 建 一 个 HTML 5 空白 文档 ， 在 <body> 标签 中 输入 相应 的 代码 
定义 canvas 的 id、width 和 height。 


<head> === " N 
<meta charset="utf-8"> type="text/javascript"> 


<title> 无 标题 文档 </title> Var canvas = document .getElementById 


head: 
</head> var ctx = canvas.getContext ("2d"); 


<body> 
<canvas id="canvas" width="220" height="150"> 
peripe rypesvrezeyyavaserrpr 
var canvas = document .getElementById ("canvas") 
script> 
</canvas> 
</body> 
</html> 


| 
(02 P| 在 <canvas> 标签 下 输入 <script>…</script> 代码 以 及 获取 canvas 元 素 的 相应 代码 。 
继续 输入 相应 的 代码 获取 绘图 用 的 上 下 文 对 象 。 


<body> |=. + 
canvas 1d="canvas" widthe"220" heighten150"> je [Eao Wi- | r= 
<script type="eexc/javaseript"> ah a aea EES 

var canvas = document .getElementById ("canvas"); 


</script> 
</canvas> 
</body> 
</html> 


m- D n Ú - mw + | 


[03 P| 输入 相应 的 代码 进行 绘制 处 理 ， 按 快捷 键 Ctrl+S， 将 其 保存 为 “ 源 文 件 \ 第 4 章 \4-2. 
html”， 按 F12 键 在 浏览 器 中 查看 页 面 效 果 。 


提问 : 关于 上 下 文 种 类 ? 
答 : 在 从 canvas 对 象 中 获取 绘图 用 的 上 下 文 时 ， 必 须 将 上 下 文 种 类 指 
定 为 24 (二 维 图 形 ) ， 现 阶段 只 能 绘制 二 维 图 形 。 


4.3 使 用 路 径 
路 径 是 canvas 绘制 图 形 的 基础 ， 通 过 多 次 重复 路 径 可 以 绘制 出 各 种 不 同 的 复杂 图 形 ， 


J 
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同时 ， 绘 制 路 径 的 方法 有 很 多 种 ， 下 面 将 进行 详细 的 讲解。 


431 开始 和 闭合 路 径 


在 HIML 5 中 ， 使 用 canvas 元 素 绘制 路 径 时 ， 可 以 使 用 beginPath() 方法 和 closePath() 
方法 对 路 径 进行 控制 。 
@ beginPath Ó 
在 绘制 图 形 的 过 程 中 ， 可 以 通过 调用 上 下 文 对 象 的 beginPath 方法 开始 路 径 的 创建 ， 其 
基本 语法 如 下 : 
cxt .beginPath(); 
@ closePath() 
在 路 径 创 建 完成 后 , 需要 使 用 上 下 文 对 象 的 closePath 方法 将 路 径 关闭 ， 其 基本 语法 如 下 : 


cxt.closePath(); 


% beginPath 方法 不 使 用 参数 ， 通 过 调用 即 可 开始 创建 路 径 ， 在 多 次 循环 
创建 路 径 的 过 程 中 ， 每 次 开始 创建 时 都 需要 调用 beginPath 函数 。 


Ep moveTo 和 1lineTo 


在 HTML 5 中 ， 可 以 使 用 canvas 元素 绘制 直线 ， 绘 制 直 线 一 般 会 使 用 moveTo 和 
lineTo 两 种 方法 。 
@ moveTo 
在 绘制 直线 的 过 程 中 ， 使 用 moveTo 方法 可 以 将 光标 移动 到 指定 的 坐标 点 ， 然 后 以 这 
个 坐标 点 为 起 点 绘制 直线 ， 基 本 语法 如 下 : 
cxt.moveTo(10,10); 
@ lineTo 
在 绘制 直线 的 过 程 中 ， 使 用 lineTo 方法 可 以 在 moveTo 方法 指定 的 直线 起 点 与 参数 中 
指定 的 直线 终点 之 间 绘 制 一 条 直线 ， 其 基本 语法 如 下 : 


cxt.lineTo(150,50); 


[加 实例 51+ 视频 : 使 用 lineTo 绘制 图 形 | 


E m. G e í m - m + 


f 源 文件 : 源 文件 \ 第 4 章 \4-3-2.html A 操作 视频 : 视频 \ 第 4 章 \4-3-2. swf 


EE 


<!doctype html> 
<html> 
<head> 


harset="utf-a" 
title> 使 用 1ineTo 绘 制图 形 </title> 
ead 
<body> 
</body> 
</html> 


COLP] Dreamweaver 中 ， 新 建 一 个 HTML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 


入 文档 标题 。 


<title> 使 用 1ineTo 绘 制图 形 </title> 
script> 
function draw (id) { 


<body> 
</body> 
</html> 


[ 02 P| 输入 <script> 标签 以 及 函数 function draw(id) f}， 在 函数 中 输入 获取 canvas 元 素 和 
获取 上 下 文 的 代码 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<cicle> 使 用 ineTo 绘 制图 形 </cicle> 
<script> 

function draw(id) ( 
var canvas = document.getElementById (id); 
if (canvas == null) return false; 

on: = sanya 


context.fillStyle = "#c3f2f0 
context.fillRect(0, 0, 350, 300 
</script{ 
</head> 


[ 93 输入 相应 的 代码 ， 绘 制 矩形 并 设置 其 样式 。 


context.closePath(); 
context.fill(); 
context.stroke(); 
$ 
</script> 
</head> 


<body pnLoad="draw((' canvas 


</body> 
</html> 


在 <body> 标签 中 输入 onLoad=" 


<script> 


var canvas = document.getElementById (id) ;| 
if (canvas == null) return false; 


var context = canvas.getContext('2d'); 


</seript> 
</nead> 


<body> 
</body> 
</html> 


context.beginPath(); 
context.fillStyle = '#f3b9d3'; 
contexc_strokestyle = '#fl90bb'; 
var x = Math.sin(0); 

var y = Math.cos (0) 1 


var dig = Math.PI / 15 * 11; 
for (var i = 0; i < 30; i++) { 
var x = Math.sin(i * dig); 
var y = Math.cos(i * dig); 
context.lineTo(dx + x * s, dy + y * a);| 
} 
context .closePath(); 


使 用 相同 的 方法 ， 输 入 其 他 代码 ， 绘 制 


for (var í = 0; i < 30; i++) { 
var x = Math 
var y = Mat 
context.lineTo(dx + x * s, dy + y * š 


) 
context.closePath(); 
context.fill(); 
context.stroke(); 
} 
</scripe| 
</head> 


</html> 


"draw(canvas):" 代码 ， 在 <body>…</body> 标签 中 输 
入 相应 的 代码 定义 canvas 的 id. width 和 height; 


© 5 > 网 页 制作 > 全 程 揭秘 


05 _] 按 快捷 键 CulrShiftrS, 将 其 另存 为 “ 源 文 件 \ 第 4 章 \4-3-2.html”， 按 F12 键 在 浏 
览 器 中 查看 页 面 效果 。 


提问 : 在 JavaScript 中 ， 条 件 语句 有 哪些 ? 
答 : 在 JavaScript 中 ， 条 件 语句 有 站 语句 、if…else 语句 、if:…else ife 
else 语句 和 switch 语句 4 种 。 


4.3.3 ECILEA 


在 HTML 5 中 ， 可 以 使 用 图 形 上 下 文 对 象 的 arc) HARE EAM, MAHE BJ 3F46 fa EE 
开始 至 结束 角度 为 止 ， 按 指定 的 方向 进行 圆 弧 的 绘制 ， 其 基本 语法 如 下 : 

cxt.arc(x,y,radius, startAngle,endAngle,anticlockwise); 

其 中 x 为 绘制 圆 形 的 起 点 横 坐 标 ，y 为 绘制 圆 形 的 起 点 纵 坐标 ，radius 为 圆 形 半径 ， 
startAngle 为 开始 角度 ，endAngel 为 结束 角度 。 


P anticlockwise 参数 为 一 个 布尔 值 的 参数 ， 当 参数 设置 为 true 时， 按 
逆 时 针 旋 转 ， 当 参数 设置 为 false 时 ， 按 顺 时 针 旋 转 。 


m 实例 52+ 视频 : 绘制 圆 形 


— J 
+ + 2 e 9 [+] ne te -| 0- Sg 2#Rea-e- 
kome Fen- WMS- R- me- raTa- 


f 源 文件 : 源 文件 \ 第 4 章 \4-3-3.html A 操作 视频 : 视频 \ 第 4 章 \4-3-3. swf 


8- 3 * m - me 


<!doctype html> 
<html> 


<head> 

<meta charset="utf-8"> 
<titie 准 制 国 册 /tit1e> 
</head> 


PET RTT 


在 Dreamweaver 中 ， 新 建 一 个 HTML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<!doctype html> 


par pai d="yuan" width="800" heighi 
iss canvas id="yuan" widt eight 
"600"></canvas> 


<meta charset="utf-8"> 
< 上 icle> 绘 制 圆 形 </cicle> 


script type="text/javascript™> 


var canvas = document .getElementById (| 


</head> 
yuan’); 
var ctx = canvas.getContext ('2d') 
<body> 
d="yuan" width="800" height= — 
Wawaku ,roeldl aq z </body> 
></canvas. </html> 
</body> 
</html> 


[02 P| 在 <body> 标签 中 输入 相应 的 代码 定义 canvas 的 id、width 和 height， 输 入 <script> 标签 
和 相应 的 代码 获取 canvas 元 素 和 上 下 文 。 


<script type="text/javascript"> <script type="text/javascript"> 
var canvas = document .getElementById!( var canvas = document.getElementById( 
'yuan'); 'yuan'); 


var ctx = canvas.getContext('2d') var ctx = canvas.getContext('2d') 
ctx.beginPath () 4 ctx.beginPath(); 
ctx.arc(150, 150, 75, O, 2 * Math. 


</script> 

a PI, false); | 

= ias <7seript> 
</body> 
</html> 


[ 03 Pj 在 <script> 标签 中 输入 ctx.beginPath0): 代码 开始 创建 路 径 ， 输 入 ctx.arc(150, 150, 
75, 0, 2 * Math.PI, false); 创建 圆 形 路 径 。 


<script type="text/javascript"> <script type="text/javascript"> 
var canvas = document .getElementById( var canvas = document .getElementById( 
'yuan'); 'yuan'); 


a i ne var ctx = canvas.getContext ('2d') 
Ctx.beginPath(); 


Ctx.beginPach(); ctx.arc(150, 150, 75, 0, 2 * Math. 
ctx.arc(150, 150, 75, 0, 2 * Math. PI, false); 


PI, false); Ctx.closePath(); 


</script> 
</body> </script> 
</html> </body> 


</html> 


输入 ctx.closePath(); 代码 关闭 路 径 ， 然 后 输入 ctx.arc(150. 150, 75, 0, 2 * Math.PI, 
false): 设置 绘制 样式 。 


EE 


© HTv suma >e J 


05 上 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 如 何 将 角度 转换 为 弧度 ? 
答 : 参数 angle 为 角度 ， 单 位 不 是 “ 度 ”， 而 是 “弧度 ”。 角 度 和 弧度 
的 转换 公式 为 var radians = degrees*math.PI/180, 


bezierCurveTo() 方 法 | 
在 HTML 5 中 ， 使 用 bezierCurveTo() 方法 可 以 绘制 三 元 抛物 线 ， 可 以 将 从 当前 坐标 点 
到 指定 坐标 点 中 间 的 贝 塞 尔 曲线 追加 到 路 径 中 ， 其 基本 语法 如 下 : 


context.bezierCurveTo(cplx, cply, cp2x, cp2y, x, y) 


m 实例 53+ 视频 : 绘制 心 形 


=: 1 Eh 
G ERIC TE 
f 源 文件 : 源 文件 \ 第 4 章 \4-3-4.html S) 操作 视频 : 视频 \ 第 4 章 \4-3-4 swf 
-~ D e 


<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 


</head> 

<body> 
-a7 pauw </body> 
me </html> 


[ 01 Pj 在 Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


EE 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 绘 制 心 形 </title> 

<script type="text/javascript"> 
unction drawShape () ( 


} 
</script> 
</head> 


第 4 章 使 用 canvas 


<head> 
<meta charset="utf-8"> 
<title> 给 制 心 形 </title> 

<script type="text/javascript"> 


function drawShape() 
[var canvas = document.getElementByld('xin 


T 
</script> 
</head> 


<body> 
</body> 
</html> 


02 jj 输入 <script> 标签 以 及 函数 function drawShape(0 人， 在 函数 中 输入 获取 canvas 元 素 


和 获取 上 下 文 的 代码 。 


<script type="text/javascript"> 
function drawShape(){ 
yar canvas = document gerElementById('xin'); 
if (canvas. getContext) { 
var ctx = canvas.getContext ('2d"); 
else { 
alert ('You need Safari or Firefox to see 


</script. 
</head> 


<body> 
</body> 
</hcml> 


<script type="text/javascript"> 
function drawShape ()( 
var canvas = document .getElementById('xin'); 
if (canvas.getContext)( 
var ctx = canvas.getContext ('2d'); 


) el 
alert('You need Safari or Firefox to see.'); 


</script> 
</head> 


<body> 
</body> 
</html> 


[ 03 P| 输入 JavaScript if-else 语句 代码 ， 以 及 获取 上 下 文 的 代码 ， 输 入 ctx.beginPath(); 创 


建 路 径 。 


<script type="text/javascript"> 
function drawShape () { 
var canvas = document .getElementById('xin'): 
if (canvas.getContext) { 
var ctx = canvas.getContext ('2d' 


ctx.moveTo (75, 40) 
) else { 
alert('You need Safari or Firefox to see.'); 
1 


) 
</script> 
</head> 


<body> 
</body> 
</html> 


塞 尔 曲线 。 


if (canvas.getContext){ 
var ctx = canvas.getContext('2d'); 
ctx.beginPath (); 
ctx.moveTo (75, 40) š 
Ctx.bezierCurveTo(75,37,70,25,50,25); 
Ctx.bezierCurveTo(20,25,20,62.5,20,62.5); 
ctx.bezierCurveTo (20,80, 40,102,75,120); 
ctx.bezierCurveTo(110, 102,130,80, 130, 62.5); 
ctx.bezierCurveTo(130,62.5,130,25,100,25); 
ctx.bezierCurveTo(85,25,75,37,75, 40); 
etx.filistyle = '#F10415 
ctx. fill () 
} else 
alert('You need Safari or Firefox to see.'); 


) 


if (canvas.getContext)( 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
Stx:moyeTo (75.40); 
Ctx.bezierCurveTo(75, 37,70,25, 50,25); 
ctx.bezierCurveTo(20,25,20,62.5,20,62.5); 
ctx.bezierCurveTo(20,80,40,102,75,120); 


ctx.bezierCurveTo(110,102,130,80,130, 62.5) 
ctx.bezierCurveTo(130, 62.5,130,25,100,25); 
ctx.bezierCurveTo(85,25,75,37,75, 40); 

) else 

alert('You need Safari or Firefox to see. 


} 
</script> 


输入 ctx.moveTo(75,40): 代码 ， 指 定 坐标 点 ， 输 入 ctx.bezierCurveTo 代码 ， 绘 制 贝 


ct: 
) else ( 

alert('You need Safari or Firefox to see.' 
} 


£111(); 


£ 
</script> 
</head> 


body onload="drawShape () ; "> 
canvas id="xin" width="150" height="150"></canvas: 


) 
[ 05 P| 输入 ctx. fillStyle = '#f10415'; 和 ctx.fill0; 代码 设置 绘制 样式 。 在 <body> 标签 中 输入 
onLoad="draw('canvas');" 代码 和 定义 canvas 的 id, width 和 height 的 代码 。 


— o > 


© HTML 5 > 网 页 制作 > 全 程 揭秘 


[ 06 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 绘制 曲线 的 方法 是 什么 ? 
答 : 在 HTML 5 中 除了 使 用 bezierCurveTo0) 方法 绘制 曲线 外 ， 还 可 以 
使 用 quadraticCurveTo() 方法 绘制 二 次 样 条 曲线 。 


4.4 渐变 图 形 
在 HIML 5 中 还 可 以 使 用 canvas 元 素 绘制 渐变 效果 ， 渐 变 是 指 从 一 种 颜色 过 渡 到 另 一 
种 颜色 ， 渐 变 分 为 线性 渐变 和 径 向 渐变 两 种 。 


线性 渐变 


绘制 线性 渐变 ， 需 要 使 用 LinearGradient 对 象 ， 然 后 使 用 createLinearGradient() 方法 
进行 创建 ， 该 方法 的 定义 如 下 : 

CanvasGradient=context .createLinearGradient (xStart, yStart,xEnd, yEnd) 
CanvasGradient .addColorstop (offset, color); 

@ xStart 为 渐变 起 始点 的 横 坐标 。 

@ yStart 为 渐变 起 始点 的 纵 坐标 。 

© xEnd 为 渐变 结束 点 的 横 坐 标 。 

© yEnd 为 渐变 结束 点 的 纵 坐标 。 


4 em 


f 源 文件 : 源 文件 \ 第 4 章 \4-4-1. html A 操作 视频 : 视频 \ 第 4 章 \4-4-1. swf 


= m-u < z m 


第 4 章 使 用 canvas 


[0w m- o a 
[asm waw sam wam 


<!doctype html> 
<html> 
<head> 


</nead> 


<body> 
</body> 
</html> 


在 Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<head> <script type="text/javascript"> 
sta coaieaeanucengwy window.onload = function () 

<srirle> tatit < citle> 
script type="text/javascript"> 


indow.onload = function () 


Men a 


</script> 
</head> 
<body> 

</head> </body> 
</html> 

<body> 

</body> 

</html> 


02 P| 输入 <script> 标签 和 脚本 函数 function(){}， 并 输入 获取 canvas 元 素 的 代码 和 获取 上 
下 文 的 代码 。 


<!doctype heal» <script type="text/javascript"> 
<html> window.onload = function () 

<head> t 

<meta cherset="utt-8"> var canvas = document .getElementById("jianbian"); 
dohainaren var context = canvas.getContext ("2d") 


<script type="text/javascript"> 
window.onload = function () 


ElementById 
Context ("2d" 


"jianbian"); 


F 
</script> 


</head> 

</script> 

</head> <body> 
</body> 
</html> 


输入 变量 var gl = context.createLinearGradient(0, 0, 0, 300);， 创 建 对 象 输入 
addColorStop， 追 加 渐变 的 颜色 。 


<script type="text/javascript"> <script type="tert/javascrip:"> 
window.onload = function () Pe A 
: var canvas 
var canvas = document .getElementById("jianbian"); oo 
var context = canvas.getContext ("2d"); Var g1 = context .creareline 
g1.addColorStop(0, "rgb(255, 0, 0)"); acacolcrscop(6， “rgb(2: 
g1.addColorStop(0.5, "rgb(255, 255, 0)"); addcolorstop(0.5, "rgb(2: 
"rgb(0, 255, 0)"); ql.acdcolcrston (1, "rob(0, 
context .FillScyle 


dccument .getElenentById ("iarbian") ; 


pe epee eed ukasa 
</script> 

</script> </head> 

</head> 

<body> z 

</body> pimesi 

</html> Qa 


输入 context.fillStyle = g1:context.fillRect(0. 0, 400, 300): 代码 ， 绘 制 矩 形 并 定义 绘制 
和 矩 形 的 填充 样式 。 在 <body> 标签 中 输入 定义 canvas 的 id, width 和 height 的 代码 。 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


CELETTE] | 


(05 PHI “X> 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


9 A 
Ay 提问 : offset 的 取 值 范围 是 多 少 ? 
2: offset 为 设 定 的 颜色 离开 渐变 起 始点 的 偏 移 量 ， 该 参数 的 取 值 范围 
在 0_1 之 间 的 浮 点 值 。 


4.4.2 径 向 渐变 


绘制 径 向 渐变 ， 同 样 使 用 createLinearGradient() 方法 进行 创建 ， 使 用 addColorStop() 

方法 追加 渐变 色 ， 该 方法 的 定义 如 下 : 

CanvasGradient=context .createLinearGradient (xStart, yStart, radiusstar, xEn 

d,yEnd, radiuseEnd) 

CanvasGradient .addColorstop (offset, color); 

© xStart 为 渐变 开始 圆 的 圆心 横 坐标 。 

© yStart 为 渐变 起 始 圆 的 圆心 纵 坐 标 。 

@ radiusStar 为 开始 圆 的 半径 。 

@ xEnd 为 渐变 结束 圆 的 圆心 横 坐标 。 

© yEnd 为 渐变 结束 圆 的 圆心 纵 坐标 。 

© radiuseEnd 为 结束 圆 的 半径 。 


< e. LEE < z m - w + 


f 源 文件 : 源 文件 \ 第 4 章 \4-4-2.html D 操作 视频 : 视频 \ 第 4 章 \4-4-2. swf 


第 4 章 使 用 canvas 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


</head> 


<body> 
</body> 
</html> 


01 p= Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<!doctype html> <head> 
<html> <meta charset="utt-8"> 
pena <rirle> 绽 制 人 向 新 总 </rirley 


<acril 


type="text/javascript"> 
<meta charset="utf-8"> 


window.onload = fanction() 
<title> 绘 制 径 向 新 变 </ citle> 1 


<script type="text/javascript"> 
window.onload = function () 


] </script> 
</neaa> 

</head> <body> 
</bocy> 

<body> /hem> 

</body> 

</html> 


02 PAA <script> 标签 和 脚本 函数 function(){}， 并 输入 获取 canvas 元 素 的 代码 和 获取 上 
下 文 的 代码 。 


ET 
<script type 
oaa = runetion() 


/bosy> 
/hen> 


[ 03 P| 输 入 变量 var gl = context.createRadialGradient(200, 0, 0, 200, 0, 200); 创建 对 象 ， 输 
入 addColorStop， 追 加 渐变 的 颜色 。 


uni gl.addColorStop(0.3, "rgb(255, 200, 0)"); 
axsy Javaacripco> 


ee g1.addcolorstop(0.5, "rgb(255, 0, 0)"); 
1 gl.addColorstop(1, "rgb(255, 255, 255)"); 
context.fillStyle = gl; 
| context.fillRect(0, 0, 400, 300); 
} 


adialGradient (7750, 0, 
o 


</script> 
</head> 
<body>. 

</head> canvas i 

/canvas> 

body> 

proil </body> 

</mena> </html> 


[ 04 P| 输入 context.fillStyle = gl;context.fillRect(0, 0, 400, 300); 代码 ， 绘 制 矩形 并 定义 绘制 
和 矩形 的 填充 样式 。 在 <body> 标签 中 输入 定义 canvas 的 id. width 和 height 的 代码 。 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 


Ea s= = 一 一 | 


BE woe ES Bo 加 ka ` i # | 


[05 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : addColorStop () 方法 中 的 offset 的 取 值 范围 是 多 少 ? 
答 : offset 为 所 设 定 的 颜色 离开 渐变 起 始点 的 偏 移 量 ， 该 参数 值 范围 为 
0-1 之 间 的 浮 点 值 。 


4.5 在 canvas 中 绘制 图 像 | 


在 HTML 5 中 ， 不 仅 可 以 使 用 canvas 元 素 绘制 图 形 ， 还 可 以 使 用 canvas 元 素 读 取 磁 
盘 或 网 络 中 的 图 像 文件 。 


图 像 绘制 的 基本 步骤 | 


图 像 绘 制 的 基本 步骤 是 首先 读 取 图 像 文件 ， 然 后 在 canvas 中 进行 绘制 ， 在 读 取 图 像 之 
前 ， 首 先 需要 创建 一 个 Image 对 象 ， 然 后 设 定 该 Image 对 象 的 src 属性 ， 再 通过 onload 事 
件 同步 执行 回执 图 像 的 函数 ， 其 基本 语法 如 下 : 

var image = new Image(); 


image.src = "图 像 文件 路 径 " 


image.onload = function() 
绘制 图 像 时 ， 需 要 使 用 drawImage0 方法 ， 一 共有 3 种 方式 ， 分 别 是 直接 绘制 、 尺 十 
修改 和 图 像 截取 。 
Ə 直接 绘制 
直接 绘制 一 般 有 3 个 参数 ，image 可 以 是 一 个 img 元 素 ， 一 个 video 元 素 或 者 一 个 
JavaScript 对 象 ，x 和 y 为 绘制 时 图 像 在 画布 中 的 起 始 坐标 ， 基 本 语法 如 下 : 
context .drawImage (image,x,y); 
@ 尺寸 修改 
尺寸 修改 的 前 3 个 参数 和 直接 绘制 的 参数 一 样 ，w 和 为 绘制 时 图 像 的 宽度 和 高 度 ， 
基本 语法 如 下 : 
context .drawImage (image, x,y, Ww,h); 
@ 图 像 截 取 
图 像 截取 可 以 将 画布 中 已 经 绘制 好 的 图 像 的 全 部 或 者 局 部 区 域 复制 到 画布 中 的 另 一 个 


第 4 章 使 用 canvas M 


位 置 上 ， 其 基本 语法 如 下 : 


context .drawImage (image, SX, Sy, Sw, sh, dx, dy, dw, dh); 


时 


drawlmage(image, sx, sy, 


sWidth, sHeight, dx, dy, dWidth, 


dHeight) 中 的 s Æ slice 的 意思 ， 即 切割 ; d 是 draw 的 意思 ， 即 绘制 。 


> 


f 源 文件 : 源 文件 \ 第 4 章 \4-5-1 (一 ) .html 


Ow m o a == DOn 
I mom mam emmy wao eso seo wow se 


emanar mnre 


A 操作 视频 : 视频 \ 第 4 章 \4-5-1 (一 ) , swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


</nead> 


<body> 
</body> 
</html> 


[ 01 Pj 在 Dreamweaver 中 ， 新 建 一 个 HTML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 


入 文档 标题 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 给 制图 像 </title> 

scripe Cext/ javacript"> 
function draw() { 

l 
1 
</script> 
</head> 


<body> 
</body> 
</html> 


[ 02 P| 输入 <script> iR EMEA A functionO í), WARE canvas 元 素 的 代码 和 获取 上 下 


文 的 代码 。 
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<script type="text/javascript"> <script type="text/javascript"> 
function draw() ( function draw() ( 
var ct: document .getElementById(" var ctx = document.getElementById(' 
par img 二 new macel) i 
} 
</script> 
</head> </script> 
</head> 
<body> 
</body> <body> 
</html> </body> 
</html> 


[ 03 P| 输入 var img = new Image(); 代码 ， 创 建 Image 对 象 。 输 入 img.src = '1.jpg':， 设 置 需 
要 绘制 图 像 文件 的 路 径 。 


时 用 户 还 可 以 通过 data:url 方式 来 引用 图 像 ，data urls 允许 使 用 一 串 
Base64 编码 字符 串 的 方式 来 定义 一 个 图 片 。 


<script type="text/javascript"> 
function draw() { 
var ctx = document.getElementById('tuxiang') 
var img = new Image(); 
img.src = '1.jpg'; 
Img.onload = function (){ 
ctx.drawImage (img, 0,0) 
} 


) 
</script> 
</head> 


pemay 


<body> 
</body> 


[ 04 P| 输入 img.onload = function) () 代码 设置 绘制 图 像 的 函数 。 在 <body> 标签 中 输入 
onLoad="draw('canvas');" 代码 和 定义 canvas 的 id, width 和 height 的 代码 。 


m= 
maa 


> 
ape 


Ef šp "ii asN 


zwan 


ri 


ansao: Ta 
人 
moi paesan manane + (wm j| < 
——— | ea 


[05 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 为 何 要 输入 onLoad="draw('canvas):" ? 
答 : 因为 只 有 输入 了 onLoad="draw('canvas'):", Æ Image 对 象 的 onload 
事件 中 同步 执行 绘制 图 像 的 函数 ， 就 可 以 边 转载 边 绘制 ， 无 须 等 待 。 
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L ETIFISIT PETIT (O) | 


2 


Hibas 


fR: 源 文件 \ 第 4 章 \4-5-1 (二 ) .html 
EAB s49 SEV AD 修改 (M) 


FEN)... Ctrl+N 

新 建 流体 网 格 布局 (让 .… 

在 Bridge 中 浏览 (B)… Ctrl+Ak+O 

打开 最 近 的 文件 (T) K 

ERRA)... Ctrl+Shift+O . _ L . 

关闭 (QO Ctri+w Tae R) Essl 

全 部 关闭 (E) Ctrl+Shift+W i. 
Cor P| 执行 “文件 > 打开 ”命令 ， 在 弹出 的 对 话 框 中 选择 “素材 \ 第 4 章 \45102.html”， 
单 击 “打开 ”按钮 。 

w E wama: 


Eag 


[到 站 打 开 素材 ， 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 在 img onload = function) {} 中 
输入 ctx.drawImage(image,510,10,240,400); 代码 。 
em wm k w K 


=a" Ces 
ansa [| ° 
woeneaso mmacmansunapu - CE APT a 


B miot 28 smo | 


[ 03 P| 执行 “文件 > 另存 为 ”命令 ,在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 
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时 图 像 可 能 会 因为 大 幅度 的 缩放 而 变 得 模糊 ， 如 果 图 像 里 面 有 文字 ， 最 好 
不 要 进行 缩放 ， 因 为 可 能 图 像 里 的 文字 会 变 得 无 法 辨认 。 


提问 : 获取 图 像 的 方式 有 了 哪些 ? 

答 : 用 户 可 以 通过 document.images 集合 、document.getElementsByTag 
Name(canvasNamellimageName) 方法 和 document. getElementById(canvasId]||i 
mageld) 方法 获取 图 像 。 


Tri 
+ 


i 4 


f: 源 文件 \ 第 4 章 \4-5-1 (三 ) .html 
|) s40 sav ND FAM 


新 建 (N)… Ctrl+N 
新 建 流体 网 格 布局 (月 … 
SE: wS cuto | 
在 Bridge 中 浏览 (B)… Ctrl+Ak+O 
打开 最 近 的 文件 (T) » 
在 杠 策 中 打开 (有 Ctrl+shift+O I _ 
mo cultw a | 
全 部 关闭 (E) Ctrl+Shift+W sassa) omaso TBT 


[91 六 执行 “文件 > 打开 ”命令 ， 在 弹出 的 对 话 框 中 选择 “素材 \ 第 4 章 45103.html”， 
Äh FIF RA 


vId("tuxiang") ; 


240,400); 
EPEE EEEE | 


ng" width="900" height="1600"></canvas> 


PPP Pessoa 
kS "o “oO ma 


[02 Pj 打 开 素 材 ， 单 击 “ 代 码 ” 按 钮 ， 打 开 代码 视图 窗口 ， 在 img.onload = function) {} 中 
输入 ctx.drawImage(image,30,240,270,440,510,430,240,370); 代码 。 
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samanata - Tanpa 
x BE mina ga wp Ci 


ohi “文件 > 另存 为 命令 ， 在 弹出 的 “另存 为" 对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


2 个 提问 : 图 像 截取 绘制 方式 的 用 处 是 什么 ? 
答 : 使 用 图 像 截取 绘制 图 像 的 方式 可 以 在 做 图 像 局 部 特写 放大 处 理 时 
用 到 。 


4.5.2 RECSA 


在 HTML 5 中 还 可 以 实现 图 像 平 铺 效 果 ， 所 谓 图 像 平 铺 是 指 图 像 按 一 定 比例 缩小 将 画 
布 填 满 ， 除 了 使 用 drawImage() 方法 之 外 ， 还 可 以 使 用 createPattern() 方法 实现 平 铺 效果 ， 
其 基本 语法 如 下 : 
context .createPattern (image, type); 
其 中 type 参数 的 值 有 4 种 字符 串 可 供 选 择 : 
no-repeat :不 平 铺 
repeat-x: 横 方向 平 铺 
repeat-y: 纵 方向 平 铺 
repeat :全 方向 平 铺 


m 实例 59+ 视频 : 绘制 平 铺 图 像 


< 


全 源 文件 : SERI 884 3 w 5 2 M A A 操作 视频 : 视频 \ 第 4 章 \4-5-2. swf 


© MUDRI 


Dw m a == SEE 


lin mm gamn eaen 


PELI 
IEICE! 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


</head> 


<body> 
</body> 
</html> 


[ 01 JÉ Dreamweaver 中 ， 新 建 一 个 HTML 5 空 自 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 


入 文档 标题 。 


<meta charset="utf-8"> 
<title> 平 铺 图 像 </title> 
script type="text/javascript">| 


unction draw (image) { 


</head> 


<cicle> 平 铺 图 像 </ticle> 
<script type="text/javascript"> 


function draw (image; 
var canvas = document .getElementById("tuxiang") 


var ctx = canvas.getContext ("2d"); 


) 
</script> 
</head> 


<body> 
</body> 
</html> 


[ 02 P| 输入 <script> 标签 和 脚本 函数 function(){}， 输 入 获取 canvas 元 素 的 代码 和 获取 上 下 


文 的 代码 。 


<script type="text/javascript"> 


function draw (image) ( 
var canvas = document.getElementById 


yar ctx = canyas getContext ("2d"); 
var image = new Image (); 
) 


</script> 
</head> 


<body> 
</body> 
</hcml> 


[ 03 P| 输入 var img = new Image0: 代码 ， 创 建 Image 对 象 。 输 入 img.src 


设置 需要 绘制 图 像 文件 的 路 径 。 


function draw (image) ( 
var canvas = document.getElementById("ruxiang"); 
var ctx = canvas.getContext ("2d"); 


</script> 
</head> 


<poay> 
</body> 
</html> 


function draw(image) ( 
var canvas = document.getElementById 
var ctx = canvas.getContext ("2d"); 


yar image = new image(); 
image.src = "45201.png"; 


) 
</script> 
</head> 


<body> 
</body> 
</html> 


'452011.png';, 


var image = new Image(); 
image.src = "45201.png"; 
image.onload = fanction(){ 
var Pattern = ctx.createPattern (image, 'repeat'); 


</script> | 
</neaa> 


<body> 
</body> 
</html> 


[ 04 P| 输入 img.onload = function) í) 代码 并 创建 填充 样式 ， 全 方向 平 铺 。 输 入 相应 的 代码 ， 


设置 填充 样式 和 填充 画布 。 


EE 
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</script> 
</head> 


body onload="draw ();" 


</body> 
</html> 


[ 05 P) Æ <body> 标签 中 输入 onLoad="draw('canvas');" 代码 ， 并 输入 定义 canvas B$ id. 
width 和 height 的 代码 。 


CE3 
me 


= & ¿W ¿8 ¿8 
É 
E &' ye y y 
%. 


#% # # 5 


wawaq | 


[ 06 多 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


2€ 


提问 : drawImage() 方法 和 createPattern() 方法 的 区 别 是 什么 ? 
答 : 使 用 drawImage() 方法 需要 使 用 几 个 变量 以 及 循环 处 理 ， 比 较 复 杂 ， 
而 createPattern() 方法 只 需 使 用 几 个 参数 即 可 达到 平 铺 效果 ， 比 较 简 单 。 


4.5.3 RELSE 


在 使 用 canvas 绘制 图 像 时 ， 常 常 只 需要 保留 图 像 的 一 部 分 ， 除 了 使 用 以 上 的 方法 外 ， 
还 可 以 使 用 图 形 上 下 文 对 象 的 clip0 方法 实现 图 像 的 裁剪 ， 其 基本 语法 如 下 : 


context .clip(); 


m 实例 60+ 视频 : 裁剪 图 像 


f 源 文件 : 源 文件 \ 第 4 章 \4-5-3. html A 操作 视频 : 视频 \ 第 4 章 \4-5-3. swf 


区 5 二 HT 5 > 网 页 制作 >》 全程 揭秘 ) 


<!doctype html> 
<html> 


Emag 


</head> 


<body> 
</body> 
</html> 


fE Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<head> <head> 
<meta charset="utf-8"> <meta charset="utf-8"> 


: m 
Pet LT: PPPPEPEN asr Sa as 
<script type="text/javascript"> 
script type="text/javascript"> 


Pr function draw 

akaaka í var c-document.getElementByld("tuxiang") 1 
var ctx=c.getContext ("2d") À 

) } 


{script> </script> 
</head> </head> 
<body> <body> 
“=e uma 
</html> 


[ 02 P| 输入 <script> 标签 和 脚本 函数 function(0{}， 输 入 获取 canvas 元 素 的 代码 和 获取 上 下 
文 的 代码 。 


<script type="text/javascript"> <script type="text/javascript"> 
function draw() { function draw() { 
var c=document .getElementById var c=document .getElementById 


"); var ctx=c.getContext ("2d"); 
var image = new Image(); 


} 

</script> } 

</head> </script> 
</head> 

<body> 

</body> <body> 


[ 03 PP 输入 var img = new Image(); 代码 ， 创 建 Image 对 象 。 输 入 img.src = '45301.png';, 
设置 需要 绘制 图 像 文件 的 路 径 。 


function draw() { function drawImage() { 
var c=document .getElementById("tuxiang"); var c=document .getElementById("tuxiang"); 
var ctx=c.getContext ("2d"); var ctx=c.getContext ("2d")| 
var image = new Image(); 
image.src = "45301.jpg"; I] 
eg </script> 
ctx.drawImage (image, 0, 0 </head> 
上 
<body> 
</script> od: 
</head> < sedgs. 
</html> 
<body> 
</body> 
</html> 


输入 img.onload = function0 人 代码， 设置 绘制 图 像 的 函数 。 使 用 相同 的 方法 ， 输 入 
function drawImage() {} 函数 和 获取 canvas 元 素 的 代码 和 获取 上 下 文 的 代码 。 


— o C 
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function dravImage() { 
var c=document.getElementById("tuxiang"); 
var ctx=c.getContext ("2d"); 


Math.PI, false); 


</head> 


<body> , 

</body> </script> 

</heml> </head> 
<body> 


</body> 
</html> 


[ 05 Pp 输入 相应 的 代码 创建 并 绘制 路 径 ， 输 入 ctx.closePathO; 代码 关闭 路 径 并 设置 填充 样式 。 


function drawImage() { </script> 
</head> 


var c=document.getElementById( 

var ctx=c.getContext ("2d"); 
ctx.beginPath(); 
ctx.arc(300, 290, 200, 0, 
ctx.closePath(); 
ctx.fillStyle = '#EA6179'; 
ctx.fill(); 


} 
} 


06 P| 输入 ctx.clip); 代码 设置 裁剪 区 域 ， 在 <body> 标 签 中 输入 onLoad="draw(); 
drawImage();" 代码 和 定义 canvas 的 id, width 和 height 的 代码 。 


mma me -osem [UY FF 


wawas | 


07 | 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 如 何 取消 裁剪 区 域 ? 
答 : 如 果 需 要 取消 设置 好 的 裁剪 区 域 ， 可 以 使 用 save 方法 保存 图 形 上 
下 文 的 当前 状态 。 


4.5.4 


在 HTML 5 中 ， 不 仅 可 以 使 用 canvas 处 理 图 像 ， 还 可 以 处 理 像素 。 使 用 canvas 可 以 
获取 图 像 中 的 每 一 个 像素 ， 从 而 得 到 该 像素 颜色 的 rgb 值 或 rgba 值 。 使 用 图 形 上 下 文 对 象 
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的 getImageData() 方法 可 以 获取 图 像 中 的 像素 ， 其 基本 语法 如 下 : 


var imagedata=context .getImageData (sx, sy, sw, sh); 


sx、sy 分 别 表示 所 获取 区 域 的 起 点 横 坐 标 和 起 点 纵 坐标 ，sw、sh 分 别 表示 所 获取 区 域 
的 宽度 和 高 度 。 
有 实例 61+ 视频 : 绘制 随机 像素 
[二 | 
fi 源 文件: 源 文件 \ 第 4 章 \4-5-4.html I S) 操作 视频 : 视频 \ 第 4 章 \4-5-4.swf 
i <html> 
<head> 
<meta Charset—"utf-8"> 
</head> 
<body> 
== </body> 
ee S sIsa </html> 
01 PP 在 Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 
<title> 经 制 创 素 </zicle> <head> B 
script type="text/javascript"> De titie 


<script type="text/javascript"> 
unction draw() { function draw) 1 


ent .getElementByid("tuxiang"):]| 


as.getContext ("2d") | 


{script> I 
</head> Z= 
<body> 
rady pady> 
<jarml> 
</body> 
</html> 


C02 Pp] 输入 <script> 标签 和 脚本 函数 function(){}， 然 后 输入 获取 canvas 元 素 的 代码 和 获取 
上 下 文 的 代码 。 


时 在 使 用 createlmageData 获取 像素 后 ， 即 可 对 这 些 像素 进行 处 理 ， 最 
后 必须 使 用 put ImageData 方法 泻 染 上 下 文才 可 显示 。 


<head> <script type="text/javascript"> 
<meta charset="utf-8"> 


function draw() { 
© type-"temt/Javaseripi var canvas = document .getElementById( 


function dras() ( var context = canvas.getContext ("2d") 
document „getElementById : 


Re yar imageDara = context.createImageDa 
Yar inageData = context. createlmageData ($00, 200);] var pixels = imageData.data:;] 


H } 

ni 

</head> </script> 
</head> 

<tody> 

cjbodvy 

</nunl> <body> 
</body> 
</html> 


[ 03 Pp] 输 入 var imageData = context.createlmageData(300. 200): 代码 创建 像素 ， 输 入 var 
pixels = imageData.data; 代码 访问 CanvasPixelArray 中 的 像素 。 


<head> 


<script tvpe="text/javascript"> 
<meta charset="utt-8"> function draw() ( 

<5l5le> 纵 制 像素 </5icle> var canvas = document .getElenentByld ("tuxiang"); 
<aoript typem"text/javascript"> var context = canvas.cetContext ("2d"); 

function draw() { var imageDara = context.createľmageData(300, 200); 


var canvas = document. getElenentById("tuxiang"); 
var context = canvas.getContext ("2 
var inageData = context.createImageData (300, 200); 


yar pixels = imageData. data; 
Var numPixcis — imageData.width inagcData. height; 


</script> </script> 
</head> </head> 
<body> <body> 
</poay> </bodv> 
</nsnly </htm1> 


输入 变量 numPixels 保存 ImageData 对 象 中 的 像素 个 数 ， 输 入 for (var i = 0; i< 
numPixels: i++) 们 ; 遍历 每 一 个 像素 。 


<script type="text/javascript"> Be e Loir ia a 
function draw() { ( 
var canvas = document.getElementById("tuxisng"); 
var context = canvas.gerContext ("24"): 
var imageData = context.createImageData (300, 200); 
var pixels = imageData.dati 
var numPixels = imageData.vidth*imageData.height; 
for (Var 1 = o; 1 < numpixels; 1++) 


pixels{i*4] = Math. floor (Math. random()*255); 
pixels[i*4+1] = Math. floor (Math.random ()*255); 
pixels[i*4+2] = Math. floor (Math. random()*255); 
pixels{1*4+3] = 255; 


Pixels[1*4] = Math.floor(Math.random()*255); 

pixels[i*44+1] = Math, floor (M: dom () *255); 

pixels[i*4+2] = Math. 7 adom () *255) ç 

Pixels[i*4+3] = 255; 
r <body> 
) </body> 
</script> </aeml> 


</head> 


[ 05 P| 输入 相应 的 代码 赋予 每 一 个 像素 颜色 值 , 输入 context. putImageData(imageData, 0, 0); 
代码 泻 染 上 下 文 。 


</script> aelataagj = tch.fioor tath, randont) 258): 
</head> hs 


Pixels[i*s+3] = 255; 


context.putImageData (imageData, 0, 0): 


</script> 


</body> uad 
</html> 


[ 06 PÆ <body> 标签 中 输入 onLoad="draw0:" 代码 ， 在 <body></body> 标签 中 输入 定义 
canvas 的 id、width 和 height 的 代码 。 


© ru suma >e J 


时 对 于 canvas 的 像素 处 理 技术 只 有 部 分 浏览 器 支持 ， 建 议 使 用 0pera 浏 
览 器 进行 代码 测试 。 


KUU ——I nE A 


07 P] 执 行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ” 对 话 框 中 进行 设置 y “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


re 
Y 


提问 : imagedata 具有 了 哪些 属性 ? 
答 : imagedata 变量 是 一 个 CanvasPixelArray 对 象 ， 具 有 height, width 
和 data 等 属性 。 


4.6 图 形 的 变形 


在 绘制 图 形 的 过 程 中 ， 常 常 需要 对 图 形 进行 一 些 变形 操作 ，HTML 5 新 增 的 canvas 元 
素 也 提供 了 路 径 旋 转 、 移 动 和 扩大 等 变形 功能 。 


4.6.1 


使 用 图 形 上 下 文 对 象 的 translate 方法 可 以 移动 坐标 轴 圆 点 ， 从 而 实现 图 形 的 平移 ， 该 
方法 的 基本 定义 如 下 : 


context .translate (x,y); 


mD 实例 62+ 视频 : 平移 图 形 


Ea ras mamaaa ens semas g. Q + =: 


fR: 源 文 件 \ 第 4 章 \4-6-1.html DA 操作 视频 : 视频 \ 第 4 章 \4-6-1. swf 


<head> 
<meta charset="utf-8"> 


EEEF 


</head> 


<body> 
</body> 
</html> 


[ 01_PJÉ Dreamweaver 中 ， 新 建 一 个 HTML 5 空 自 文档 ， 在 代码 视图 窗口 的 <tite> 标签 中 输 
入 文档 标题 


<head> ms 
<meta charset="utt-8"> 
<meta charset="utf-8"> <rcitle> 图 形 的 究 形 </ cicle> 


<title> 图 形 的 变形 </title> 
script type="text/javascript" 
unction draw (){ 


</script> 
</hesd> 


<body> 
</noayy 
</html> 


</head> 


[ 02 P| 输入 <script> 标签 和 脚本 函数 function) {}, $A AZRE canvas 元 素 的 代码 和 获取 上 下 
文 的 代码 。 


<head> function draw()( 

<meta charser="urf-8"> = docu El ById 
BEME cicio var canvas ocument .getElementBy; 
<script type="text/javascript"> var context = canvas.getContext ("2d" 
function draw(){ context.fillStyle = "#ffefff"; 


var canvas = document.getElementById("tuxiang"): 


sea =< context.fillRect (0, 0, 400, 300); 
Context.fillStyle = "#ffefff"; context.translate : 
Context.fillRect!0, 0, 400, 300); } 

) 

</script> </script> 

ara </head> 

<body> 

</body> <body> 

hemd: 
es </body> 


Cos P| 输入 相应 的 代码 , 绘制 矩形 , 输入 context. translate(200, 50): 代码 设置 移动 坐标 轴 原 点 。 


var context = canvas.getContext ("2d"); "usa kaq akak 
context.fillStyle = "#ffefff"; Sre aaa a ssh; 
context.fillRect(0, 0, 400, 300); ontexs £41iRect (0, 0,50, 30) 


context.translate(200, 50); } 
context. ETTTSEYIe = 'rgba(152,3,45,0.25)'] 


for(var ; 3 < 50; i++) </script> 
</head> 


context.translate(25, 25); 
context.fillRect (0,0,50,30) 


ody onLoad="araw{);"> 
canvas ide"tuxiang" widthe"400" height 


acml> 
) 


</script> 
</head> 


[ 04 pJ AB289454, EEEF, E <body> 标签 中 输入 onLoad="draw0;" 
代码 和 定义 canvas 的 id, width 和 height 的 代码 。 


S 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 


| = 


sea ananassa. amaan ee sameaa 


[ 05 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : translate 方法 中 参数 的 含义 是 什么 ? 


答 : translate 方法 中 的 x 表示 将 坐标 轴 原 点 向 左 移动 多 少 个 单位 ，y 表 
示 将 坐标 轴 原 点 向 下 移动 多 少 个 单位 。 


4.6.2 


使 用 图 形 上 下 文 对 象 的 scale 方法 可 以 将 图 形 放大 或 缩小 ， 该 方法 的 基本 定义 如 下 : 


context .scale (x,y); 


mb KH 63+ 视频 : 扩大 图 形 


f 源 文件 : 源 文件 \ 第 4 章 \4-6-2. html P) 操作 视频 : 视频 \ 第 4 章 \4-6-2. swf 
EAB s49 SEV 插入) 修改 (M) Er = Eo 
新 建 (N)… Ctrl+N A 
新 建 流体 网 格 布局 (有 = 
š 
£ Bridge 中 浏览 (B).… Ctrl+Alt+O = 
打开 最 近 的 文件 em 
在 框架 中 打开 (月 .. Ctrl+Shift+O ° 
BO Criw 二 | 
全 部 关闭 (E) Ctrl+Shift+W 


SAEZ) otsan: [RATE 


01 PAIT X> 打开 ”命令 ， 在 弹出 的 对 话 框 中 选择 “素材 \ 第 4 音 \46201.html”， 
单 击 “ 打 开 ” 按 钮 。 
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for(var i = 0; i < 50; i++) 


context.translate(25 S): 
context.fillRect(0,0,50,30) 
? 
} 


</script> 
</head> 


[02 FP 打开 素材 ， 单 击 “ 代 码 ” 按 钮 ， 打 开 代 码 视 图 窗口 ， 在 <script> 标签 中 输入 context. 
scale(0.95, 0.95); 代码 。 


[Ea K N 


mmu. jwe 


[03 > 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : scale 方法 的 参数 范围 是 什么 ? 
Z: scale 方 法 有 两 个 参数 ， 分 别 是 x 和 y， 这 两 个 参数 的 范围 均 为 
0-1 


4.6.3 


使 用 图 形 上 下 文 对 象 的 rotate 方法 可 以 对 图 形 进行 旋转 操作 ， 该 方法 的 基本 定义 如 下 : 


context .rotate (angle); 


mb 实例 64+ 视频 : 旋转 图 形 


S == ra 
f 源 文件 : 源 文件 \ 第 4 章 \4-6-3.html S) 操作 视频 : 视频 \ 第 4 章 \4-6-3. swf 


Oa [RE 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 ] 


[EBI] s40 SEV EAD 修改 (M) 


FEN)... Ctrl+N 
新 建 流体 网 格 布局 (P… 

在 Bridge 中 浏览 (8).… Ctrl+Alt+O 
打开 最 近 的 文件 (T) » 
在 框架 中 打开 (月 Ctrl+Shift+O 
关闭 (QO Ctrl+W 
全 部 关闭 (E) Ctrl+Shift+W 


CoL P] 执 行 “ 文 件 > 打开 ”命令 ， 在 弹出 的 对 话 框 中 选择 “素材 \ 第 4 章 \46301.html”， 
单 击 “打开 ”按钮 。 


for(var i = 0; i < 50; i++) 


context.translate(25, 25); 
Sontext.scale (0.95, 0.95): 
context .fillRect (0,0,50,30) 
) 
) 


</script> 


z s m </head> 
打开 素材 ， 单 击 “ 代 码 ” 按 钮 ， 打 开 代 码 视图 窗口 ， 在 <script> 标签 中 输入 context. 
rotate(Math.PI / 8): 代码 。 


Ë 


sp qi aN É 


wes 0 


p masaa | 


[03 > 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 如 何 使 图 形 按 逆 时 针 旋转 ? 
答 rotate 方 法 的 参数 angle 指 旋转 的 角度 , 默认 是 以 顺 时 针 方 向 进行 旋转 ， 
将 其 设置 为 负数 即 可 按 逆 时 针 旋 转 。 


4.6.4 E22 


变形 矩阵 是 专门 用 来 实现 图 形变 形 的 ， 它 与 坐标 配合 使 用 ， 从 而 达到 变形 的 目的 ， 使 
用 图 形 上 下 文 对 象 的 transforms 方法 可 以 修改 变形 矩阵 ， 该 方法 的 定义 如 下 : 


— o > 


第 4 章 使 用 canvas M4 


context.transform(mll,m12,m21,m22,dx,dy) 
该 方法 使 用 一 个 新 的 变形 矩阵 与 当前 变形 和 矩阵 进行 乘法 运算 ， 从 而 实现 图 形 的 变形 ， 
该 变形 和 矩阵 的 形式 如 下 : 


mll m21 dx 
m12 m22 dy 
0 0 


m 实 例 65+ 视频 : 使 用 矩阵 变换 


f 源 文件 : 源 文件 \ 第 4 章 \4-6-4 html S) 操作 视频 : 视频 \ 第 4 章 \4-6-4. swf 


Dw m o a w 三 


<head> 
<meta charset="utf-8"> 


title>iBf </title> 


</head> 


<body> 
</body> 
</html> 


01 ] 在 Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<cicle> 拒 阵 变换 </ 上 icle> 


easy <script type="text/javascript"> 
<meta charset="utf-8"> window.onload = function () 
<cicle> 拒 阵 变换 </cicle> 

var canvas - document getElementById ("tuxiang") ; 


<script type="text/javascript"> 


window.onload = function() ] 
</script> 


var context = canvas.getContext ("24"); 


</head> 
} 

2 <body> 
</head> p Ss 
<body> 
</body> 


</html> 


[ 02 P| 输入 <script> 标签 和 脚本 函数 function) í), WARE canvas 元 素 的 代码 和 获取 上 下 
文 的 代码 。 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


<meta charset="utf-8"> 
<title> 拭 阵 变换 </titie> 
<script type="text/javascript"> 
window.onload = function () 
t 
var canvas = document.getElementById 
var context = canvas.getContext ("2d" 


) 
</script> 
</head> 


<body> 


<script type="rext/javascript"> 
window.onload = function () 

t 

var canvas = document.getElementById("tuxiang"); 
var context = canvas.getContext ("2d"); 
context.fillStyle = "tefe"; 


</script> 
</head> 


<body> 
</body> 
</hcml> 


[ 03 _ 输入 相应 的 代码 ， 绘 制 矩 形 并 设置 填充 样式 ， 输 入 var colors = ["red", "yellow", 
"green", "blue", "orange", "navy", "white"]; 代码 定义 颜色 。 


<script type="text/javascript"> 
window.onload = function() 

{ 

var canvas = document .getElementBy 
Var context = canvas.getContext ("2 
context .fillStyle = "#efe"; 
context.fillRect (0, 0, 800, 600); 
var colors = ["red", "yellow", "gr 


:ontext .lineWidth = 104| 


</script> 


<script type="text/javascript"> 
window.onload = function () 

{ 

var canvas = document .getElementById("t 
var context = canvas.getContext ("2d"); 
context.fillStyle = "#efe"; 
context.fillRect(0, 0, 800, 600); 

var colors = ["red", "yellow", "green", 
context.lineWidth = 10; 
ontext.transform(1, 0, 0, 1, 100, 0)4 
) 

</script> 


04 | 输入 相应 的 代码 ， 定 义 绘 制 线条 的 宽度 。 输 入 context.transform(1, 0, 0, 1, 100, 0): 代 


码 ， 设 置 变换 矩阵 。 


<script type="text/javascript"> 

window.onload = function ({) 

{ 

var canvas = document getElementById("cuxiang"); 

var context = canvas.getContext ("2d"); 

context.fillStyle = "#efe"; 

context.fillRect(0, 0, 800, 600); 

var colors = ["red", "yellow", "green", "blue", 

context.lineWidth = 10; 

context.transform(1, 
= Tr 


:transform(1, 0, 


</script> 


for(var í = 0, j = colors.length; í < j; i++) 
t 
context. transform(1, 0, 0, 1, 10, 10); 


ontext.strokeStyle = colors[i 


) 
</script> 
tad> 


[ 05 Pp 输入 相应 的 代码 ， 定 义 每 次 向 下 移动 10 个 像素 的 变换 矩阵 。 输 入 context.strokeStyle 


= colors[i]; 代码 定义 颜色 。 


var colors = ["red", "yellow", "green", " 
context.lineWidth = 10; 
context.transform(1, 0, 0, 1, 100, 0); 
for(var i = 0, j = colors.length; í < j; 
t 


context.transform(1, 0, 0, 1, 10, 10); 


context.strokeStyle = colors[i]; 
context .beginPath(); 
context.arc(200, 200, 150, 150, 2, true) 


[context stroke () : 
} 


} 
</script> 


for(var i = 0, 3 = colors.length; 1 < j; i+) 
{ 
canrexr .rranaform(1, 0, 0, 1, 10, 10); 
concext .atrokeStyle = colora[i]; 
context.beginPath( 
context.arc(200, 2i 
context. stroke(); 
1 
i 
</script> 

</head> 


, 150, 150, 2, true); 


[ 06 P| 输入 相应 的 代码 ， 绘 制 圆 弧 。 在 <body> 标签 中 输入 定义 canvas KY id, width 和 height 


的 代码 。 


第 4 章 使 用 canvas M4 


[ 97 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 变形 矩阵 的 其 他 方法 是 什么 ? 
答 : 除了 使 用 transform 方法 以 外 ， 必 要 时 还 可 以 使 用 setTransform 方 
法 将 变形 矩阵 进行 重 置 ， 它 的 参数 和 用 法 与 transform 相同 。 


4.7 绘制 文本 


在 HIML 5 中 ， 不 仅 可 以 绘制 图 形 ， 还 可 以 绘制 图 像 ， 甚 至 还 可 以 绘制 文本 ， 绘 制 文 
本 的 方法 如 下 : 


方法 说 明 
context.fillText(text,x,y) 使 用 填充 方式 绘制 文本 
context.fillText(text,x.y.max Width) 使 用 填充 方式 绘制 文本 
context.strokeText(text,x,y) 使 用 轮廓 方式 绘制 文本 
context.strokeText(text,x,y,maxWidth) 使 用 轮廓 方式 绘制 文本 
绘制 文本 的 相关 属性 如 下 : 
属性 效果 
context.font 定义 文本 的 样式 
context.textAlign 定义 文本 的 对 齐 方式 
context.textBaseline 定义 文本 的 基准 线 
时 在 绘制 文字 的 过 程 中 ， 可 以 使 用 fillText 和 strokeText 方法 中 的 


maxWidth 参数 表示 显示 文字 时 的 最 大 宽度 。 


© HTv sy》 网页 制作 》 全 程 所 和 ) 


m 实例 66+ 视频 : 绘制 文本 


f 源 文件 : 源 文件 \ 第 4 章 \4-7.html A 操作 视频 : 视频 \ 第 4 章 \4-7. swf 


bed na em =e 


<meta charset="utf-8"> 


title> 经 制 X 子 </title> 


</head> 


<body> 
</body> 
</html> 


[ 01 >Æ Dreamweaver 中 ， 新 建 一 个 HTML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<head> 
<meta charset="utf-8"> 
<title> 给 制 文字 </title> 
script type="text/javascript">| 
indow.onload = function() 


</head> 


[ 02 FP] 输入 <script> 标签 和 脚本 函数 function({}， 输 入 获取 canvas 元 素 的 代码 和 获取 上 下 
文 的 代码 。 


{ 


Context.font = "60pt Calibri"; 
cont: fillStyle = "red"; 


var context = document .getElement 
a : context.fillText("HELLO!", 50, 100) 
context.font = g 


} 


context.fillStyle = "red"; 


</script> 
} </head> 
</script> 
</head> <body> 
</body> 
<body> </ntml> 
</body> 
</html> 


03 P| 输 入 相应 的 代码 设置 绘制 文字 的 字体 和 填充 样式 ， 输 入 context fillText("HELLO!", 
50, 100); 代码 绘制 文字 。 


第 4 章 使 用 canvas M4 


[ 04 Pj 在 <body> 标签 中 输入 定义 canvas 的 id. width 和 EA 的 代码 。 执行 = .另存 为 š 
命令 ， 保 存 文件 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


? 
Eg 


提问 : 绘制 文字 的 方法 是 什么 ? 
答 : 绘制 文字 可 以 使 用 fillText 或 strokeText 两 种 方法 ， 不 同 的 是 一 
是 填充 方式 ， 一 个 是 轮廓 方式 。 


4.7.1 对 齐 方式 | 


在 HTML 5 中 ， 可 以 使 用 textAlign 属性 控制 文本 的 左 对 齐 、 右 对 齐 或 者 居中 等 ， 该 属 
性 的 基本 定义 如 下 : 


context .textAlign="center"; 


4.7.2 


textAlign 属性 用 于 定义 文本 的 水 平方 向 的 基准 ，textBaseline 属性 用 于 定义 文本 的 垂 
直方 向 的 基准 ， 用 户 可 以 在 textBaseline 中 指定 top. middle, bottom. hanging, alphabetic 
和 ideographic 等 ， 该 属性 的 基本 定义 如 下 : 


context .textBaseline = "middle"; 


m 实例 67+ 视频 : 调整 绘制 文本 


NH 8 sa = 


绘制 文字 


fx 源 文件 ; 源 文件 \ 第 4 章 \4- 2. html A 操作 视频 : 视频 \ 第 4 章 \4-7-2. swf 


© uru 5 > 网 页 制作 > 全 程 揭秘 


x == = 


Qama wue 


EET OR RIT 


入 文档 标题 。 


<head> 

<meta charset="utf-8"> 
<title> 绘 制 文字 </title> 

script type="text/javascript">| 
indow.onload = function() 


</head> 


文 的 代码 。 


<title> 绘 制 文字 </title> 
<script type="text/javascript"> 
window.onload = function() 


g 
var context = document.getElem 
context.font = "30pt Calibri" 
context.fillStyle = "yellow"; 

} 

</script> 


CRETA Chaprset=wutE-85 


</head> 


<body> 
</body> 
</html> 


TKIYPUTETUYUILYTIYITYSYTIT”IIYZ YS 


输入 <script> 标签 和 脚本 函数 function(){}， 输 入 获取 canvas 元 素 的 代码 和 获取 上 下 


<script type="text/javascript"> 

window.onload = function() 

{ 
var context = document .GeLE1e: 
context.font = "30pt Calibri" 
Context .fillStyle = "yellow"; 


context.textAlign = "center" 4 
} 


</script> 
</head> 


[ 03 P| 输入 相应 的 代码 设置 文字 的 字体 和 填充 样式 ， 输 入 context.textAlign = "center"; 代码 


设置 文字 的 水 平 对 齐 方式 。 


<script type="text/javascript"> 

window.onload = function () 

{ 
var context = document.getEleme: 
context.font = "30pt Calibri"; 
context.fillStyle = "yellow"; 
context.textAlign = "center" 


context.textBaseline = "top"; 


} 


</script> 
</head> 


输入 context.textBaseline = 
绘制 文字 。 


<title> 绘 制 文字 </title> 
<script type="text/javascript"> 
window.onload = fanction() 


{ 


var context = document .getElementById 
context.font = "30pt Calibri"; 
context.fillStyle = "yellow"; 

context .textAlign = "center"; 

Context .textBaseline = 
context .fillText ("fE 


"toj 


XF", 100, 50); 


} 


</script| 
</head> 


"top"; 代码 设置 文字 的 垂直 对 齐 方式 ， 输 入 相应 的 代码 ， 
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绘制 文字 


05 | 在 <body> 标签 中 输入 定义 canvas 的 id. width, height 和 style 的 代码 。 执 行 “ 文 件 > 
另存 为 ”命令 ， 保 存 文件 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : textBasel ine 属性 都 有 哪些 属性 值 ? 
答 : textBaseline 属性 的 属性 值 包括 top. hanging, middle, alphabetic. 
ideographic 和 bottom。 


4.8 图 形 的 组 合 


在 canvas 中 可 以 将 一 个 图 形 重 又 绘制 在 另 一 个 图 形 上 方 ， 使 用 图 形 上 下 文 对 象 的 
globalCompositeOperation 属性 即 可 设置 图 像 的 组 合 方式 ， 其 基本 语法 如 下 : 
context .globalCompositeOperation = type; 
type 的 值 必须 是 下 面 几 种 字符 串 之 一 : 
@ source-over 
source-over 为 globalCompositeOperation 属性 的 默认 值 ， 表 示 新 图 形 覆 盖 在 原 有 图 形 
的 上 方 。 
@ destination-over 
destination-over 表示 在 原 有 图 形 的 下 方 绘制 新 图 形 。 
@ source-in 
source-in 表示 新 图 形 与 原 有 图 形 作 in 运算 ， 只 显示 新 图 形 中 与 原 有 图 形 重合 的 部 分 ， 
新 图 形 与 原 有 图 形 的 其 他 部 分 变 为 透明 。 
@ destination-in 
destination-in 表示 原 有 图 形 与 新 图 形 作 in 运算 ， 只 显示 原 有 图 形 中 与 新 图 形 重 蕉 的 部 
分 ， 新 图 形 与 原 有 图 形 的 其 他 部 分 变 为 透明 。 
@ source-out 
source-out 表示 新 图 形 与 原 有 图 形 作 out 运算 ， 只 显示 新 图 形 中 与 原 有 图 形 不 重叠 的 部 
分 ， 新 图 形 与 原 有 图 形 的 其 他 部 分 变 为 透明 。 
@ destination-out 
destination-out 表示 原 有 图 形 与 新 图 形 作 out 运算 ， 只 显示 原 有 图 形 中 与 新 图 形 不 重 倒 
的 部 分 ， 新 图 形 与 原 有 图 形 的 其 他 部 分 变 为 透明 。 
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@ source-atop 
source-atop RR RAAE rh 5 J 8 EJ E 8 BJ 582 E 3 8 E S 28 ARARA, 
新 图 形 的 其 他 部 分 变 为 透明 。 
@ destination-atop 
destination-atop 表示 只 绘制 原 有 图 形 中 被 新 图 形 重 有 覆盖 的 部 分 与 新 图 形 的 其 他 部 分 ， 
原 有 图 形 中 的 其 他 部 分 变 为 透明 ， 不 绘制 新 图 形 中 与 原 有 图 形 重 又 的 部 分 。 
@ lighter 
lighter 表示 原 有 图 形 与 新 图 形 均 绘制 ， 重 全 部 分 做 加 色 处 理 。 
@ xor 
xor 表示 只 绘制 新 图 形 中 与 原 有 图 形 不 重合 的 部 分 ， 重 登 部 分 变 为 透 阴 。 
@ copy 
copy 表示 只 绘制 新 图 形 ， 原 有 图 形 中 未 与 新 图 形 重 伙 的 部 分 变 为 透明 。 


时 2D 泻 染 上 下 文 的 globalcomposite0peration 属性 的 默认 值 是 source- 


over. 


=> 实例 68+ 视频 : 组 合 图 形 


f 源 文件 : 源 文 件 \ 第 4 章 \4-8.html 和 操作 视频 : 视频 \ 第 4 章 \4-8. swf 
<head> 
ET rra sa ses FI BNS pa 
HEI mera cha = -8 
zis title> 组 合 图 型 </zitle> 
| </head> 
E <body> 
EE = </body> 
— = ..1m.——s s J 
e—a Oa </html> 
= 


[ 01 P£ Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<head> 

<meta charset="utf-8"> 
<title> 组 合 图 形 </title> 
script> 

indow.onload = function() 


{ 


} 
/script> 
</head> 


输入 <script> 标签 和 脚本 函数 function(){}， 并 输入 获取 canvas 元 素 的 代码 和 获取 上 
下 文 的 代码 。 


<script> 
tmnotiont) window.onload = function () 
{ 
var context = docume: 
context.fillStyle = 
context.arc(120, 120, 


getElementByld ("zuhe") .ger 
jb (0, 250, 255)"; 
00, 0, Math.PI*2, false); 


context .globalCompositeOperation = — 
+ 


</script> 
</neaa> 


<boay> 
</body> 
</nvnl> 


输入 相应 的 代码 绘制 
over"; 代码 设置 图 形 组 合 方式 。 


形 ， 并 输入 context.globalCompositeOperation = "source- 


<script> 
window.onload = function () 
{ 
var context = document .getElementById("zuhe") .gec 
Fonrexr .fi11Sryle = "rgb(0, 250, 255)": 


context.arc(120, 120, 100, 0, Math.PI*2, false); ) 
context. £411(); </ocripe> 
context.globalCompositeOperation = "source-over"; </nesa> 


context.beginPath(); 
context.fillStyle = "rgb(255, 250, 0)"; 
context.arc(180, 120, 100, 0, Math, PI*2, false); 
context. £411(); 

) 

</script> 

</head> 


<body> 
</body> 


[ 04 FP] 使 用 相同 的 方法 ， 输 入 相应 的 代码 绘制 另 一 个 圆 形 ， 在 <body> 标签 中 输入 定义 
canvas 的 id、width、height 的 代码 。 


[05 P| 执 行 “ 文 件 > 另存 为 ”命令 ,在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 
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<script> 


window.onload = fanction() 
{ Ta > 
var context = document. gerElemeni 
context. Eil13tyle — "rgb(0, 25 
Sentene. ere (129, 520, 190, 9, 


1 
</script> 
‘</head> 


<poay> 
<canvas id-"zuhe" width-"600" height="600"></canvas> 

</body> 

jheml> s CaCI 


[06 Pj) 将 context.globalCompositeOperation = "source-over"; 代码 修改 为 context. 
globalCompositeOperation = "source-in" 


<acript> 
window.onload ~ function() 
í 


ext ~ document. getEl 


contexs. fil); 
1 

</script> 

</heady 


<body> 
<canvas ide"zuhe" width=naoo" 


</body> 
/heml> as m 


将 contextglobalCompositeOperation = "source-in"; 代码 修改 为 
"source-Out";o 


<acript> 
window.onload = function() 


“ 


context. 
context. 
context. t1111); 

context. globalcompositeoperi 
conteat.beginPath() ; 
context. fillStyle ~ "rgb (255, 


} 
</script> 
</head> 


<body> 
<canvas id="zuhe" width="000" height-"600"></canvas> 

</body> 

/hemly Donn aaaa a = 


[08 PP] 将 context.globalCompositeOperation = "source-out"; 代码 修改 为 和 


context. £i110; 
) 

</script> 

/head> 


<body> 
<canvas id="zuhe" width="800" heighe="600"></canvas> 
</boay> 
«yazmis 


Loo 8] 将 context.globalCompositeOperation = "source-over"; RARAN context. 


globalCompositeOperation = "destination-over";。 
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window.onload = roncrion() 
í 


/acript> 


as la=vzumen vicn="s00" ne1gnt="500"></canvas> 
</body> 
/boml> 


(10 Pp] 将 context. globalCompositeOperation = "destination-over"; 代码 修改 为 context. 
globalCompositeOperation = "destination-in";。 
Sindov.onload = fonctiont) 


tDyld("zune") ,oerconcexs 


<body> 
ceanvas aevztnew wiatnansoon heagnc=vaoovyc1canyaay 
</body> 
/henl> 


k 


将 context.globalCompositeOperation = "destination-in"; 代码 修改 为 context. 
globalCompositeOperation = "destination-out":。 


onload = fanctiont) 


var context = a 


ment getElenentayIc ("zuke") „gecContext 


onrexF -zt13113 
) 

</seript> 

ead> 


cdyy 
<canyas id-"zuhe" width="0900" heiohc-"600ryc/canvesy 

yodyy 

<mum> 


[ 12 P| 将 context.globalCompositeOperation = "destination-out"; 代码 修改 为 context. 
globalCompositeOperation = "destination-atop":。 


[13 p) 为 了 查看 效果 ， 修 改 绘制 圆 形 的 颜色 ， 并 将 context. s Asma = 
"destination-atop": 代码 修改 为 context.globalCompositeOperation = "lighter";。 
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[ 14 PF] 将 context.globalCompositeOperation = "lighter"; 代码 修改 为 context.globalCompositeOperation 


z 


oro 


[ 15 PP] 将 context.globalCompositeOperation = "xor"; 代码 修改 为 context.globalCompositeOperation = 
"copy"; 


? ë 
Eg 


提问 : 为 何 有 时 候 无 法 显示 图 形 ? 
答 : 因为 一 些 浏览 器 不 支持 全 部 的 globalCompositeOperation 值 ， 所 以 
需要 使 用 支持 globalCompositeOperation 的 浏览 器 查看 效果 。 


4.9 绘制 阴影 


在 HIML 5 中 ， 使 用 canvas 元 素 可 以 为 绘制 的 图 形 添 加 阴影 效果 ， 使 用 图 形 上 下 文 对 
象 的 相关 属性 即 可 ， 相 关 属 性 如 下 所 示 : 


属 性 效 果 
shadowOffsetX 阴影 的 横向 位 移 量 
shadowOffsetY | 阴影 的 纵向 位 移 量 
shadowColor | 阴影 的 颜色 
sbadowBlur L, 


S o C 
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实例 69+ 视频 : 为 图 形 添加 阴影 | 


二 


f 源 文件 : 源 文件 \ 第 4 章 \4-9.html 
EAB S49 SEV ÆA 修改 (M) 


新 建 (N)... Ctrl+N 
新 建 流体 网 格 布局 (P… 

RO). S Ctri+O 
€ Bridge 中 浏览 (8)… Ctrl+Alt+O 


打开 最 近 的 文件 ( 


在 框架 中 打开 (月 .… Ctrl+Shift+O 
关闭 (QO Ctri+W 
全 部 关闭 (E) Ctrl+Shift+W 


A 操作 视频 : 视频 \ 第 4 章 \4-9. swf 


Om zonan 1025 


amao me 
zsU | 
Massa) oman. [inian 


[01 执行 “文件 > 打开 ”命令 ， 在 弹出 的 对 话 框 中 选择 “素材 \ 第 4 章 \4901.html”， 单 
击 “ 打 开 ” 按 钮 。 


function createPic() 

4 

var canvas = document .getElementById("tuxing"); 
var context ~ canvas.getContext ("2d"); 
Context. fillStyle = "#eaffee"; 
context.fillRect (0, 0, 400, 300); 
context.translate(200, 50); 

for(var i = 0; 1 < 50; 1++) 

$ 

context.translate(25, 25); 
context.scale(0.95, 0.95); 
context.rotate(Math.PI / 8); 
createStar (context); 

context. fill (); 


[02 P| 单 击 “ 代 码 ”按钮 ， 打 开 代 码 视 图 窗口 ， 在 function createPic(){} 函数 中 输入 
context.shadowColor = "rgb(255, 0, 0)"; 代码 设置 阴影 的 颜色 。 


function createPic() 

{ 

var canvas = docunent .getElementById("tuxing"); 
var ccntext = canv tContext ("2d") ; 


ETTSEYTE 
context. fillRect (0 
context .translate!200, 50); 
for(var i = 0; ií < 50; i++) 
t 
context.translate{25, 25); 
ennrewr arate (0.95, 0.95): 
context.rotate(Math.PI / 8); 
createStar (context); 

context. £111(); 

$ 
Ë 


function creacePic () 


conzexc.shadouColor = "zcb1255， 


Context.fi11Rect (0, 0, 400, 300); 
context.translate(200, 50); 
for(var i = O; i < 50; i++) 

{ 

contert.translate(25, 25): 


03 p]# À context.shadowBlur = 50: 设置 阴影 的 模糊 范 输入 context.shadowOffsetX = 0; 


设置 阴影 的 横向 位 移 量 。 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 ) 


关闭 (O Ctrl+W 
ruxing"): 全 部 关闭 (E) Ctrl+Shift+W 

保存 (S) Ctrl+S 

保存 全 部 (D 

保存 所 有 框 关 文件 (R) 


BERMEN 


IOREP).. cap 
04 p. 给 入 context.shadowOffsetY = 0; 代码 设置 阴影 的 纵向 位 移 量 , 执行 “文件 > 另存 为 ” 


AE 
: 


siz adam l 


(o5 PP] 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， pes “保存 ” 按钮， 按 F12 键 在 浏览 器 中 
预览 该 页 面 。 


2 个 提问 : 为 图 形 添 加 阴影 有 何 用 途 ? 
答 : 通过 组 合 使 用 各 种 模糊 和 颜色 值 ， 可 以 实现 一 些 与 阴影 完全 无 关 的 
效果 。 例 如 使 用 模糊 黄色 阴影 在 一 个 对 象 周围 创建 出 光照 效果 ， 如 太阳 或 发 
光 体 。 


4.10 绘制 动画 效果 | 


在 canvas 中 除了 可 以 使 用 多 种 方法 绘图 ， 还 可 以 实现 动画 ， 在 canvas 中 制作 动画 相 
对 比较 简单 ， 就 是 一 个 不 断 擦 除 、 重 绘 的 过 程 ， 具 体 步骤 如 下 。 

(1) 更 新 需要 绘制 的 对 象 。 

(2) 清除 画布 。 

(3) 在 画布 中 重新 绘制 对 象 。 

(4) 使 用 setInterval 方法 设置 动画 的 间隔 时 间 。 


% 在 绘制 动画 的 过 程 中 ， 需 要 注意 的 是 在 清除 对 象 之 前 不 要 绘制 对 象 ， 否 
则 将 看 不 到 任何 对 象 。 
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(mò 实例 70+ 视频 : 使 用 canvas 绘制 动画 | 


源 文件 : 源 文件 \ 第 4 章 \4-10. html A 操作 视频 : 视频 \ 第 4 章 \4-10. swf 


<html> 
<head> 


me ha =" gm 


title> 绘 制 动 画 </titley> 


<body> 
</body> 
</html> 


(01 Pp] 在 Dreamweaver 中 ， 新 建 一 个 HIML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


<head> -绘制 动画 </zicle> 
<meta charset="utf-8"> 

" <style> 
<zicle> 绘 制 动 画 </zicle> "aasi 


<style> 
pa border:solid 1px #999; 
border:solid 1px #999: background-color: #000; 
background-color: #000; 


</style> 
</head> 


<body> 
</body> 


(02 P| 输 入 <style></style> 标签 设置 cvs 的 样式 ， 输 入 <script src="41001.js"></script> fÑ 
码 引 用 外 部 脚本 。 


nload = fanction() 
var angle 


输入 <script> 标签 和 脚本 函数 function0 仓 ， 在 函数 function) í) 中 输入 setInterval 
设置 动画 的 间隔 时 间 。 
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Sdctx.drawText ({ 
message:"Loading...", 
xPos:220, 


yPos:125, 
type:"fill", 
color:"rgba(255,255,255,1)", 


H): 
1,33); 


[ 04 P| 输入 drawText 方法 的 代码 绘制 文本 ， 在 <body> 标签 中 输入 定义 canvas 的 id. width 
和 height 的 代码 。 


05 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : setlnterval 方法 有 几 个 参数 ? 
Z: setInterval 方法 有 两 个 参数 ， 第 一 个 参数 表示 执行 动画 的 函数 ， 第 
二 个 参数 表示 为 时 间 间 隔 ， 单 位 为 毫秒 。 


(411 保存 与 恢复 绘图 状态 | 


在 使 用 canvas 绘制 图 形 的 过 程 中 ， 常 常 需要 对 绘图 状态 进行 保存 与 恢复 ， 从 而 可 以 继 
续 绘 制 其 他 图 形 。 用 户 可 以 使 用 canvas 中 的 save 和 restore 两 个 方法 分 别 保 存 和 恢复 图 形 
上 下 文 的 当前 绘图 状态 。 


绘图 状态 是 指 描述 某 一 时 刻 2p 泻 染 上 下 文 外 观 的 整套 属性 ， 从 简单 的 
颜色 值 到 复杂 的 变换 矩阵 以 及 其 他 特性 。 


图 形 上 下 文 对 象 当前 状态 的 保存 与 恢复 是 一 个 比较 独立 的 知识 点 ， 它 与 其 他 知识 没有 
关联 ， 可 以 应 用 在 以 下 几 个 情况 下 : 
@ 图 像 或 图 形变 形 。 
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@ 图 像 裁剪。 

e 改变 图 形 上 下 文 的 以 下 属性 时 : fillStyle、font、globalAlpha、globalComposite、 
Operation. lineJoin, lineWidth、 miterLimit、shadowBlue、shadowColor、shadowOffsetX、 
shadowOffsetY、 strokeStyle、textAlign 和 textBaseline。 


4.111 保存 绘图 状态 


在 HTML 5 中 ， 使 用 canvas PERE TXH save 方法 即 可 保存 画布 状态 ， 该 方法 的 
代码 如 下 : 


context .save () ; 


4.11.2 WETEN 


# HTML 5 中 ， 使 用 canvas 中 泻 染 上 下 文 的 restore 方法 即 可 恢复 画布 状态 ， 该 方法 
的 代码 如 下 : 


context.restore(); 


二》 实例 71+ 视频 : 使 用 restore 绘制 图 形 


f 源 文件 : 源 文件 \ 第 4 章 \4-11-2.html 


A 操作 视频 : 视频 \ 第 4 章 \4-11-2. swf 


<head> 
<meta charset="utf-8"> 
$ AKR SEA iC /titlej] 
<body> 
</body> 
</html> 


[01 PP 在 Dreamweaver 中 ， 新 建 一 个 HTML 5 空白 文档 ， 在 代码 视图 窗口 的 <title> 标签 中 输 
入 文档 标题 。 


在 绘制 图 形 的 过 程 中 ， 需 要 注意 的 是 画布 上 的 当前 路 径 和 当前 位 图 (E 
在 显示 的 内 容 ) 并 不 属于 状态 。 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


<head> 

<meta charset="utf-8"> 
<title> 保 存 与 恢复 绘图 状态 </title> 
script type="text/javascript™> 
indow.onload = function ()( 


j script> 
</head> 


<body> 
</body> 
</html> 


下 文 的 代码 。 


window.onload = function()( 
var canvas = document.getElementById( 
w mar 


ang’); 


7 
</script> 
</head> 


<body> 
</body> 
</html> 


<head> 
<meta charset="utf-5"> 
图 扶 态 </zizle> 


JecEIemencById('Eang 
2d 


</script> 
</head> 


<body> 
</body> 
</html> 


输入 <script> 标签 和 脚本 函数 functionO 人 入， 并 输入 获取 canvas 元 素 的 代码 和 获取 上 


window.onload = function() 
var canvas = document .ge 
var context = canvas.get' 
context .fillStyle = 


} 
</script> 
</head> 


<body> 


03 p # A context.fillStyle = "rgb(255, 0, 0)"; 代码 设置 填充 样式 ， 输 入 context.save(); 代码 


保存 绘图 状态 。 


<script type="text/javascript"> 
window.onload = function ()( 
var canvas = document.getElementById('fang'); 
var context = canvas.getContext ('2d"); 
context.fillStyle = "rgb(255, 0, 0)"; 
£ 
</script> 
</head> 


<body> 
</body> 
</html> 


代码 绘制 图 形 并 保存 绘图 状态 。 


canvas = document .getElementl 
context = canvas.getContext( 
context.fillStyle = "rgb(255 
context.save(); 
context.fillRect (50, 50, 100 
context.fillStyle = "rgb(0, 
context.save(); 
context.fillRect (200, 50, 10' 


} 


[ 05 >] 输 N context.restore(); 代码 恢复 绘 
代码 绘制 矩形 。 


window.onload = function(){ 
var canvas = document.getElementById('fang'); 
var context = canvas.getContext('2d'); 
context.fillStyle = "rgb(255, 0, 0)"; 
context. save (); 


} 
</script> 
</head> 


<body> 
</body> 
</html> 


输入 context.fillRect(50, 50, 100, 100); 代码 绘制 矩形 ， 使 用 相同 的 方法 ， 输 入 相应 的 


canvas = document.getElementById('fang'); 
context = canvas.getContext ('2d'); 
context.fillStyle = "rgb(255, 0, 0)"; 
context.save () ; 

context.fillRect(50, 50, 100, 100); 
context.fillStyle = "rgb(0, 255, 0)"; 
context.save(); 

context.fillRect(200, 50, 100, 100); 
context.restore () ; 


} 


状态 ， 输 入 context.fillRect(350, 50, 100, 100); 


第 4 章 使 用 canvas M4 


canvas = document.getElementById('fang'); 
context = canvas.getContext('2d'); 
context.fillStyle = "rgb(255, 0, 0)"; 
context. save(); 

context.fillRect (50, 50, 100, 100); 
context.fillStyle = "rgb(0, 255, 0)"; 
context.save(); 

context.fillRect(200, 50, 100, 100); 
context.restore(); 

context. fillRect (350, 50, 100, 100); 


context.restore (); 
context.fillRect (500, 50, 100, 100); 
) 


[ 06 上 使 用 相同 的 方法 ， 输 入 相应 的 代码 恢复 绘图 状态 并 绘制 矩形 ， 在 <body> 标签 中 输入 
定义 canvas 的 id, width. height 的 代码 。 


-orem ee re 
osre -= 


——— C ma 


ansaa | 
w 


[97 > 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 如 何 使 用 restore 恢复 绘图 状态 的 顺序 ? 
答 : 在 使 用 canvas 绘制 图 形 保存 多 个 绘图 状态 后 ， 使 用 restore 恢复 绘 
图 状态 时 ， 先 恢复 最 后 一 次 保存 的 绘图 状态 ， 以 此 类 推 。 


4.12 本 章 小 结 


本 章 主要 讲解 了 HTML 5 中 新 增 canvas 元 素 的 基本 知识 。 通 过 本 章 的 学 习 ， 读 者 可 以 
熟练 掌握 如 何在 HTML 5 文档 中 绘制 简单 图 形 、 渐变 图 形 、 图 像 , 以 及 如 何 对 图 形 进行 变形 、 
组 合 和 添加 阴影 等 操作 。 


掌握 什么 是 XHTML 


了 解 XHTML 的 优势 


掌握 CSS 样式 的 概念 


掌握 CSS 样式 的 分 类 


熟练 掌握 CSS 选择 器 


CSS 基础 


在 制作 网 页 时 ， 通 过 使 用 CSS 样式 可 以 将 页 面 的 内 
容 和 表现 形式 分 离 ， 从 而 进一步 对 页 面 进行 美化 ， 本 章 将 
对 CSS 基础 进行 详细 的 讲解 。 


5.1 什么 是 XHTML 


XHTML 是 Extensible HyperText Markup Language 的 
缩写 ， 与 HIML 相 比 ，XHTML 具有 更 加 规范 的 书写 标准 
和 更 好 的 跨 平台 能 

XHTML 是 由 国 国际 W3C 组 织 制定 并 公布 发 行 的 ， 它 
是 一 种 过 渡 技 术 ， 结 合 了 HTML 的 简单 特性 ， 也 结合 
XML 的 部 分 功能 


为 何 要 升级 到 XHTML | 


HTML 是 为 了 网 页 的 设计 和 表现 ， 而 XHTML 是 面 
结构 的 语言 ， 用 于 对 网 页 内 容 进 行 结构 设计 ， 严 谨 的 语 
结构 更 加 有 利于 浏览 器 进行 解析 处 理 。 

XHTML 是 XML 的 过 渡 语 言 ， 可 以 帮助 用 户 快 速 适 
应 结构 化 的 设计 ，XHTML 可 以 es XML 的 标记 
语言 、 应 用 程序 及 协议 进行 良好 的 交 

XHTML 是 Web 的 发 展 趋势 ， a A: 好 的 兼容 性 ， 
使 用 XHTML 既 可 以 设计 出 适合 XML 系统 的 页 面 ， 又 适 
£ HTML 浏览 器 的 页 面 。 


XHTML 的 页 面 结构 | 


XHTML 的 页 面 结构 与 HTML 的 页 面 结构 基本 相似 ， 
一 个 完整 的 XHTML 文档 必须 包括 如 下 几 个 基本 元 素 : 
@ 文档 类 型 声明 

文档 类 型 声明 部 分 由 <!DOCTYPE> 元 素 定义 ， 页 面 
代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 


Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtmll-transitional.dtd"> 


@ <html> 元 素 
<html> 元 素 是 XHTML 文档 中 必须 使 用 的 元 素 ， 所 
有 的 文档 内 容 都 必须 包含 在 <html> 元 素 之 中 ， 基 本 语法 


Cs 


如 下 : 
<htm1> 文 档 的 内 容 </htm1> 
@ <head> 元 素 
<head> 元 素 也 是 XHTML 文档 中 必须 使 用 的 元 素 ， 其 作用 是 定义 页 面 头 部 的 信息 ， 基 
本 语法 如 下 : 
<head> 文 档 信息 </head> 
Ə 《title> 元 素 
<title> 元 素 用 于 定义 页 面 的 标题 ， 基 本 语法 如 下 : 
<title> 标 题 </title> 
@ <body> TŽ 
<body> 元 素 用 于 定义 页 面 显示 的 内 容 ， 页 面 信息 主要 通过 它 来 传递 ， 在 <body> 元 素 
中 可 以 包含 所 有 页 面 元 素 ， 基 本 语法 如 下 : 
<body> 页 面 信息 </body> 


% 在 预览 和 发 布 页 面 时 ，XHTML 文档 中 的 “title> 元 素 包含 的 文本 会 显示 
在 浏览 器 的 标题 栏 中 。 


a] XHTML 的 代码 规范 


在 使 用 XHTML 语言 进行 网 页 制作 时 ， 必 须 遵循 一 定 的 语法 规则 ， 同 时 ， 这 些 语 法 规 
范 也 是 XHTML 与 HTML 的 主要 区 别 ， 具 体 的 语法 规则 如 下 : 
@ 属性 必须 小 写 

在 XHTML 文档 中 ， 属 性 和 属性 值 必须 使 用 小 写 ， 正 确 的 写法 如 下 : 

<head> 

<meta charset=utf-8" /> 

<title> 标 题 </title> 

</head> 
@ 属性 值 必须 使 用 英文 的 双 引 号 括 起 来 

在 XHTML 文档 中 ， 属 性 值 需要 使 用 英文 的 双 引 号 “""” 括 起 来 。 


<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 


</head> 
@ 所 有 的 标签 必须 有 结束 标签 
在 XHTML 文档 中 ， 所 有 的 标签 必须 有 结束 标签 ， 正 确 的 写法 如 下 : 
EE> 
<th scope="row"> 单 位 </th> 
</tr> 
@ 明确 属性 值 
在 XHTML 文档 中 ， 规 定 每 一 个 属性 都 必须 有 一 个 属性 值 ， 如 果 属 性 没有 值 ， 必 须 以 
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自己 的 名 称 作为 值 ， 代 码 如 下 : 


<input name="sox" type="text" checked="checked" /> 


@ 声明 DOCTYPE 

在 XHTML 文档 中 必须 声明 文档 的 类 型 ， 便 于 浏览 器 识别 ， 声 明 DOCTYPE 必须 放置 
在 文档 的 第 一 行 ， 当 浏览 器 检测 到 DOCTYPE 即 会 转换 到 标准 模式 ， 页 面 显示 的 速度 也 会 
较 快 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 

xhtml1/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 


<title> 无 标题 文档 </title> 
</head> 


<body> 
</body> 
</html> 


时 在 XHTML 文档 中 ，D0CTYPE 声明 既 不 是 XHTML 的 一 部 分 ， 也 不 是 文档 的 
一 个 元 素 ， 无 须 加 结束 标签 。 


Ə 使 用 id 属性 代替 name 属性 
在 XHTML 文档 中 ， 元 素 的 name 属性 不 可 以 使 用 ， 需 要 使 用 id 属性 代替 name 属性 。 
错误 写法 如 下 : 
<img src="file:///C|/Users/Administrator/Pictures/5.jpg" name="picture/" 
width="894" height="894" /> 
正确 写法 如 下 : 
<img src="file:///C| /Users/Administrator/Pictures/5.jpg" id="picture/" 
width="894" height="894" /> 
@ XHTML 文档 格式 必须 规范 
在 XHTML 文档 中 ， 所 有 的 标签 必须 被 嵌 套 使 用 在 <html> 根 标签 中 ， 所 有 其 他 的 标 
签 还 可 以 有 自己 的 子 标签 。 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 文 档 标 题 </title> 


</head> 

<body> 
<p> 页 面 内 容 </p> 

</body> 

</html> 


Ə XHTML 元 素 必须 是 完全 散 套 的 
在 XHTML 文档 中 ， 元 素 必须 是 嵌 套 的 ， 而 HTML 并 不 严格 ， 有 时 候 会 有 不 完全 诬 套 


Ca 


的 元 素 。 


<div class="hidden-template main-news clearfix"> 
<ul class="rec-act"> 
<li class="float-left"> 
<a target="_blank"> 
<img width="115" height="80"/> 
<span></span> 
</a> 
</li> 
<li class="float-right"> 
<a target="_blank"> 
<img width="115" height="80"/> 
<span></span> 
</a> 
</li> 
</ul> 

</div> 


Æ Dreamweaver 中 编辑 XHTML | 


XHTML 可 以 在 任何 文本 编辑 器 中 进行 编辑 ， 在 实际 工作 中 ， 为 了 提高 工作 效率 ， 一 
般 选 择 使 用 Dreamweaver 软件 。 


有 实例 72+ 视频 : 创建 XHTML 文档 


TsslolseL5 


Erua enr 
109 mee 
mo 


AEH: 源 文 件 \ 第 1 章 \5-1-4 html A 操作 视频 : 视频 \ 第 1 章 \5-1-4. swf 


rm 


= 
HTML 4.01 Transitional 
HTML 4.01 Strict 

W 


sitional p 


XHTML 1.0 
XHTML 1.1 
.XHINL Mobile 1.0 


[01 Pp 打开 Dreamweaver 软件 ， 按 快捷 键 CtlHN， 弹 出 “新 建文 档 ” 对 话 框 ， 在 弹出 的 “新 
建文 档 ” 对 话 框 中 设置 “文档 类 型 ”。 
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时 XHTML 文档 可 以 被 任何 文本 编辑 器 读 取 ， 因 此 使 用 XHTML 代码 编写 的 页 
面 可 以 在 手机 和 掌上 计算 机 等 移动 设置 上 显示 。 


[02 P| 单 击 “创建 ”按钮 ， 即 可 创建 一 个 XHTML 页 面 , 执行 快捷 键 Ctrl+S， 将 其 保存 为 “ 源 
文件 \ 第 5 章 \5-1-4.html”。 
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提问 : XHTML 有 几 种 文档 类 型 ? 
答 : XHTML 1.0 一 共有 3 种 文档 类 型 ， 分 别 是 XHTML 1.0 
Transitional, XHTML 1.0 Strict 和 XHTML Mobile 1.0。 


HTML 和 XHTML 的 转换 | 


在 实际 工作 中 ， 为 了 避免 使 用 HTML 文件 的 网 站 重新 构建 网 站 耗费 大 量 资金 ， 可 以 将 
HTML 转换 为 XHTML， 只 需 熟 练 掌握 XHTML 的 基本 语法 即 可 。 
@ DOCTYPE 声明 

打开 一 个 HTML 文档 ， 在 首 行 添加 如 下 DOCTYPE 声明 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtml1/DTD/xhtmll-transitional.dtd"> 


@ 小 写 的 属性 和 标签 名 
XHTML 只 接受 小 写 的 HTML 标签 和 属性 名 ， 将 HTML 中 所 有 的 大 写 标 签 蔡 换 为 小 写 
标签 ， 属 性 名 也 替换 为 小 写 。 
@ 给 属性 加 引号 
由 于 W3C XHTML 1.0 标准 中 要 求 所 有 的 属性 值 都 必须 加 引号 ， 所 以 将 HTML 文档 中 
所 有 元 素 的 属性 值 使 用 英文 的 双 引号 括 起 来 。 
@ 空 标签 
在 XHTML 文档 中 不 允许 有 空 标签 ， 在 HTML 文档 中 ， 需 要 使 用 <hr> 和 <br/> 代替 
<hr> 和 <br>。 
@ 验证 站 点 
在 完成 以 上 的 转换 后 ， 需 要 通过 官方 的 W3C DTD 进行 校 验 ， 可 能 还 有 一 些 错误 ， 需 
要 逐一 修改 。 


第 5 章 CSS 基础 Ë 


e@ 在 W3C 网 站 中 有 一 个 开放 源 代 码 (open-source) 的 软件 叫做 HTML 
Tidy， 它 可 以 帮助 用 户 直接 将 HTML 升级 到 XHTML. 


[5.2 CSS 的 概念 


CSS 是 Cascading Style Sheets ( 层 倒 样式 表 ) 的 缩写 ， 是 一 种 对 Web 文档 添加 样式 的 
简单 机 制 ， 用 于 控制 Web 页 面 内 容 的 外 观 ， 也 是 一 种 表现 HTML 或 XML 等 页 面 外 观 的 计 
算 机 语言 ， 由 W3C 定义 和 维护 。 

通过 使 用 CSS 样式 设置 页 面 的 格式 ， 可 以 将 页 面 内 容 与 表现 形式 分 离 ， 页 面 内 容 和 定 
义 代码 表现 形式 的 文件 分 别 放置 在 不 同 的 位 置 ， 可 以 更 加 容易 维护 站 点 。 


5.2.1 css 的 基本 语法 


一 个 基本 的 CSS 样 式 包 括 3 部 分 , 分 别 是 Selector (选择 器 ) ~ Property (属性 ) 和 Value (R 
性 值 ) ， 基 本 语法 如 下 : 


selector(propertyl: valuel; property2: value2; property3: value3; ...) 


5.2.2 


随 着 互联 网 的 发 展 ， 网 页 的 表现 形式 更 加 多 样 化 ， 使 用 CSS 可 以 控制 整个 页 面 的 风格 ， 
它 具 有 以 下 几 个 优点 : 

@ 可 以 更 好 地 控制 页 面 布 局 。 

@ 更 加 灵活 地 设置 一 段 文 本 的 行 高 、 缩 进 ， 还 可 以 加 入 三 维 效 果 的 边框 。 

e 可 以 方便 地 为 网 页 中 任何 元 素 设置 不 同 的 背景 颜色 和 背景 图 像 。 
@ 可 以 精确 地 控制 网 页 中 各 元 素 的 位 置 。 
° 
° 


可 以 为 网 页 中 的 元 素 设置 各 种 过 滤器 ， 从 而 产生 阴影 、 模 糊 和 透明 等 效果 。 
可 以 与 脚本 语言 相 结 合 ， 从 而 产生 各 种 动态 效果 。 


5.2.3 CSS 样式 的 类 型 


CSS 样式 可 以 位 于 文档 的 <head></head> 标签 之 间 ， 其 作用 范围 由 class 或 其 他 任何 复 

A css 规范 的 文本 设置 ，CSS 层 琶 样式 包括 如 下 几 种 类 型 。 
@ 自 定义 CSS 样式 

该 样式 与 某 些 字 处 理 程序 中 使 用 的 样式 相似 ， 只 是 没有 区 分 字符 样式 和 段落 样式 。 用 
户 可 以 将 自 定义 的 CSS 样式 应 用 于 一 个 完整 的 文本 块 或 一 个 局 部 的 文本 范围 ， 自 定义 CSS 
样式 表 代码 如 下 : 

1.font01{ 

2. font-family:" R"; 

3. font-size: 10px; 

4. Color: FEETEEE 
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Sm] 
将 自 定义 的 CSS 样式 表 代码 应 用 在 <td> 标签 中 ， 代 码 如 下 : 
<td c lass="font01"> 
@ HTML 样式 
HTML 样式 是 指 通过 CSS 样式 对 HTML 标签 原 有 的 样式 效果 进行 重新 的 定义 ， 当 用 
户 创建 或 改变 一 个 CSS 样式 表 时 ， 所 有 包含 在 该 标签 中 的 内 容 将 遵循 所 定义 的 CSS 样式 表 
的 格式 显示 ， 定 义 的 HTML 样式 表 代 码 如 下 : 


background-color: #000000; 
background-image: url (image/01.png) ; 
background-repeat:repeat-x; 
margin:3px; 

-} 

@ oss 选择 器 样式 


使 用 CSS 选择 器 样式 重新 定义 一 些 特定 的 标签 组 合 或 包含 特定 id 属性 的 标签 ，CSS 


选择 器 样式 代码 如 下 : 
l.a:link( 
2 font-weight: bold; 
3 text-decoration: none; 
4 color: #000000; 
5 
6.a:visited( 
Fi font-weight: bold; 
8. text-decoration: none; 
5 color: #000fff; 
10.) 
11.a:hover{ 
12 font-weight: bold; 
T3 text-decoration: none; 
14. color: #00348; 
152 
16.a:active( 
TT font-weight: bold; 
1gs text-decoration: none; 
19. color: #01572f; 
20.} 


a:link 为 链接 未 单 击 ，a:visted 为 链接 已 单 击 ，a:hover 为 鼠标 经 过 
链接 ，a:active 为 介 于 hover 和 visited 之 间 的 一 个 状态 ， 即 链接 被 按 下 
时 的 状态 。 


(5.3 CSS 的 分 类 


CSS 样式 表 可 以 以 多 种 方式 灵活 地 应 用 到 所 设计 的 HTML 页 面 中 ， 选 择 方式 根据 设计 
的 不 同 要 求 来 制定 。 一 般 可 以 将 CSS 样式 分 为 3 种 ， 分 别 是 内 联 样式 、 内 部 样式 表 和 外 部 
样式 表 。 


M 
为 图 内 联 样式 


内 联 样式 是 指 将 CSS 样式 表 写 在 HTML 标签 中 ， 其 基本 格式 如 下 : 
<p style="color: #12531f; font-size: 10px; background-color: #eeeeee"> 内 联 样式 </p> 


m 实例 73+ 视频 : 设置 内 联 样式 


[91 P] 执 行 “文件 > 打开 ”命令 ， 在 弹出 的 
html”， 单 击 “ 打 开 ” 按 钮 ， 打 开 素材 。 


cz, 


Qunti w vsa 


<div 1d="box"> 


p [Exyls=ncclcz .4c30" line-height i22px] m: e ala 
EE 
aR REDIR MENAR- BHEE HES FS GTIRE SU Sasu 
这 宁县 面包 的 起 源 ， 但 它 还 是 未 发 蔡 的 "天 面 ~， 也 
与 此 同时 ， 北 闫 的 古代 生地 雪人 也 用 志和 条 


Ps] 
8834 SGS A SS, </r: 


[ 02 gj 单 击 “ 代 码 ”按钮 ， 打 开 代 码 视图 窗口 ， 在 <p> 标签 中 添加 style 属性 ， 为 其 添加 内 
联 样式 ， 使 用 相同 的 方法 ， 完 成 其 他 <p> 标签 内 联 样式 的 添加 。 


J. 内 联 CSS 样式 是 所 有 CSS 样式 中 比较 简单 、 直 观 的 方法 ， 可 以 直接 把 
CSS 样式 代码 添加 到 HTML 标签 中 ， 即 作为 HTML 标签 的 属性 存在 。 
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CE | 
srao ges - 62sm 
每 saze - 
Pe. 28 sas. 
= 
= 
A 
sm 
` Ë Css 
Bp pesa buanna qana shinka Ne s] wa ) 
mai parase: + m| 
J missie ga ome sawas] 


03 | 按 快捷 键 Ctrl+S， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 按 钮 ， 按 
F12 键 在 浏览 器 中 预览 该 页 面 。 


Q Z B ARs 样式 有 何 特点 ? 
2 答 : 内 联 CSS 样式 是 HTML 标签 对 于 style 属性 的 支持 所 产生 的 一 种 


CSS 样式 表 编 写 方式 ， 并 不 符合 表现 与 内 容 分 离 的 设计 模式 ， 它 和 表格 布局 
从 代码 结构 上 完全 相同 ， 利 用 了 CSS 对 于 元 素 的 精确 控制 优势 。 


天 风情 内 部 样式 表 


@ 内 部 样式 表 
内 部 样式 表 是 指 写 在 HTML 的 <head>…</head> 标签 中 ， 以 <style> 标签 开始 ， 
</style> 标签 结束 ， 其 基本 格式 如 下 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 内 部 样式 表 </title> 

<style type="text/css"> 
padding:2px; 
margin:2px; 
border:2px; 

} 

body{ 
font-family:"Courier New", Courier, monospace; 
font-size:9px; 
color:#0C9 

} 

</style> 

</head> 


<body> 


内 部 样式 表 


</body> 
</html> 


m 实例 74+ 视频 : 设置 内 部 样式 | 


[ 91 多 执行 “文件 > 打开 ′ 命 令 ， 在 弹出 的 “打开 ”对话 框 中 选择 “素材 \ 第 5 章 \53201html' ， 
单 击 “打开 ”按钮 ， 打 开 素材 。 


a 


E “Q G. 2 Fi a 


PETERT 


.font01 { 
font-family: "方正 彩云 或 体 "; 
font-size: 14px; 
font-style: italic; 
color: #F00; 


|< u z mx G2Ə AEE 


} 


m “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 可 以 看 到 该 页 面 的 内 部 CSS 样式 表 代 码 ， 
EAMHARREXT 个 名 为 .font01 的 类 CSS 样式 。 


<div id="we 


Sst; TARAYRE” 早 在 :万 
再 F 代 民族 就 已 种 杆 小 考 和 大 去 Ld 


"更 为 ; 
Ft ye Se E-e </p> 
<br> 
CETTE ghd LUN 


į ， 口 
Tha 易于 消化、 mi, anD, 和 
</p> 
</div> 
</div> 
</body> 
</hun1> 


[ 03 PJ 在 <p> 标签 中 定义 class 属性 ， 添加 相应 的 代码 。 etkisi Cults 保存 文件 按 F12 
键 在 浏览 器 中 预览 该 页 面 。 


EE 
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9 内 部 样式 表 是 CSS 样式 表 的 初级 应 用 形式 ， 它 只 能 针对 当前 页 面 ， 不 能 
跨 页 面 使 用 。 
IF | 
< 提问 : 内 部 CSS 样式 表 有 什么 缺点 ? 
答 : 内 部 CSS 样式 不 适合 一 个 多 页 面 的 网 站 ， 只 适合 在 单一 页 面 中 设 
置 单 独 的 CSS 样式 。 


5.3.3 外 部 样式 表 


@ 外 部 样式 表 
外 部 样式 是 CSS 样式 表 中 较为 理想 的 一 种 形式 ， 可 以 将 CSS 样式 表 代 码 单独 编写 在 
一 个 独立 的 文件 中 ， 由 网 页 进行 调用 ， 其 基本 格式 如 下 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 外 部 样式 表 </title> 
<link href="style/css.css" rel="stylesheet" type="text/css"/> 
</head> 


<body> 
外 部 样式 表 
</body> 
</html> 


(5> 实例 75+ 视频 : 设置 外 部 样式 


f 源 文件 : 源 文件 \ 第 5 章 \5-3-3.html 


A 操作 视频 : 视频 \ 第 5 章 \5-3-3. swf 


时 外 部 的 CSS 样式 文件 应 该 与 HTML 文件 放置 在 同一 个 目录 下 ， 和 否则 需要 
修改 CSS 样式 代码 中 所 引用 的 背景 图 像 的 位 置 。 


Cs 


= L 
PETIT 
| EESFEEEBF. SED. BkLSH. VESLERS. 1. IE. Sia, kus 
和 
mamo: Kuasa ——= 
E emp 
01 P| 执 行 “ 文 件 > 打 开 ” 命 令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 5 章 \53301 htnl”， 


Bh “HE RA HARHA 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 外 部 样式 表 </title> 


<link href="53302.css" rel="stylesheet"| 


Cas 
J Cun 


ype="text/css"> 
</head> 


[ 03 >] 按 快捷 键 Ctrl+S， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 按 钮 ， 按 
F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 外 部 CSS 样式 表 有 何 优点 ? 
答 : 多 个 网 页 可 以 调用 同一 个 外 部 样式 表 文 件 ， 从 而 实现 代码 的 最 大 化 
多 用 以 及 网 站 文件 的 最 优化 配置 。 


5.4 CSS 文档 结构 | 


CSS 通过 与 HTML 文档 结构 相对 应 的 selector 选择 器 来 实现 控制 页 面 显示 。CSS 文档 
结构 不 仅 在 CSS 应 用 上 很 重要 ， 对 于 行为 也 很 重要 。 


医 @ 基 上 Tt 5 > 网 页 制作 》 全 程 揭秘 ] 
5.4.1 


所 有 的 Css 都 是 基于 标签 之 间 层 层 嵌 套 的 关系 ，<html> 标签 被 称 为 “ 根 ”， 它 是 
有 标签 的 源头 ， 然 后 层 层 包含 在 每 一 个 层 中 ， 称 上 层 标签 为 下 层 标签 的 “ 父 ” 标 签 ， 下 层 
标签 为 上 层 标签 的 “ 子 ” 标 签 ， 以 下 为 一 个 简单 的 HTML 文档 结构 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>CSS 文 档 结构 </title> 

</head> 


<body> 
<h1> 中 国 最 著名 的 工商 业 城 市 <em> 上 海 <em/></h1> 
<p> 欢 迎 来 到 具有 深厚 近代 城市 文化 底蕴 和 众多 历史 古迹 的 <i > 上海 </i></p> 
<ul> 
<1i> 在 这 里 ， 你 可 以 : 
<ul> 
<1i> 领 略 大 都 市 的 繁华 </1i> 
<1i> 体 验 生 活 的 乐趣 </1i> 
<1i> 感 受 大 自然 的 活力 </1i> 
</ul> 
</1li>x 
</ul> 
</body> 
</html> 


5.4.2 css 的 继承 性 


在 CSS 语言 中 , 子 标签 继承 父 标签 的 样式 , 子 标签 还 可 以 在 父 标签 样式 的 基础 上 修改 ， 
产生 新 的 样式 ， 而 不 影响 父 标签 。 


54.3 css 的 特殊 性 


CSS 的 特殊 性 规定 了 当 多 个 规则 同时 应 用 在 一 个 元 素 中 时 ， 权 重 高 的 样式 会 被 优先 采 
用 ， 以 下 例子 中 的 颜色 会 优先 采用 红色 : 


.font0l1{ 
color:red; 


color:green 
1 
<p class="font01"> 内 容 </p> 


544 css 的 层 倒 性 


CSS EË EJE fE ls] — Web 文档 中 可 以 有 多 个 样式 ， 当 拥有 相同 特殊 性 的 规则 应 用 
在 同一 元 素 时 ， 根 据 顺 序 ， 后 定义 的 规则 会 优先 采用 ， 它 是 W3C 组 织 批准 的 一 个 辅助 


第 5 章 CSS 基础 Ë 


HTML 设计 的 新 特性 ， 它 可 以 统一 整个 HTML 的 外 观 ， 可 以 在 设置 文本 之 前 就 指定 整个 文 
本 的 属性 ， 层 从 样式 表 为 网 页 制作 带 来 了 很 大 的 灵活 性 。 


时 根据 CSS REE, 可 以 推断 出 内 联 样式 ( 写 在 标签 内 ) > 内 部 样式 表 ( 写 
在 文档 头 部 ) > 外 部 样式 表 〈 写 在 外 部 样式 表 文件 中 ) 。 


545 css 的 重要 性 


不 同 的 规则 具有 不 同 的 权重 ， 对 于 同一 选择 器 ， 后 定义 的 CSS 样式 会 替代 先 定义 的 
CSS 样式 ， 但 有 时 需要 某 个 CSS 样式 拥有 最 高 的 权重 ， 使 用 important 即 可 标 出 CSS 样式 
的 重要 性 ， 以 下 例子 中 的 颜色 会 优先 采用 绿色 : 


.font01( 
color:red; 
} 
pí 
color:green; ! important 
} 
<p class="font01"> 内 容 </p> 


时 在 CSS 样式 表 中 ，important 声明 的 规则 将 高 于 访问 者 本 地 样式 的 定义 ， 
因此 需要 谨慎 使 用 。 
[5.5 CSS 选择 器 | 


选择 器 也 成 为 选择 符 ，HTML 中 的 所 有 标签 都 是 通过 不 同 的 CSS 选择 器 进行 控制 的 ， 
选择 器 不 仅仅 是 HTML 文档 中 的 元 素 标签 ， 还 是 class (类 ) 、id (元 素 的 位 移 标识 名 称 ) 
和 元 素 的 某 种 状态 (例如 a: hover) 。 根 据 选择 器 的 用 途 ， 可 以 将 其 分 为 标签 选择 器 、 类 
选择 器 、id 选择 器 、 通 配 选 择 器 、 伪 类 选择 器 和 组 合 选择 器 。 


551 标签 选择 器 


HTML 文档 是 由 多 个 不 同 的 标签 组 成 的 , 可 以 使 用 CSS 选择 器 控制 标签 的 应 用 样式 ， 
例如 body 选择 器 可 以 用 来 控制 页 面 中 所 有 <body> 标签 的 样式 ， 标 签 选择 器 的 语法 格式 
如 下 : 

body { 
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
color: #0C9; 
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=b 实例 76+ 视频 : 使 用 标签 选择 符 | 


B=” 


ë EBEBF3 2 


f 源 文件 : 源 文件 \ 第 5 章 \5.5-L html 


[EB] s49 (Vv EAD 修改 (M) 
新 建 (N).…. Ctrl+N 


b 


E Bridge PMEG). CARTO 
打开 最 近 的 文件 () , 
在 框架 中 打开 ().. Ctrl+Shift+O 
关闭 (O Ctrl+w 
全 部 关闭 (E) Ctrl+Shift+W 


[01 P| 执行 “文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 5 章 \55101htnl”， 
Ah FIF ”按钮 ， 打 开 素 材 。 

= ————— padding-top:340px; 
margin-left:372px; 


y 
$ 


img{ 
margin:0 8px 0 8px 
} 


</style> 
</head> 


[0627] 按 F12 键 在 浏览 器 中 预览 该 页 面 ， 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 输 入 相 
应 的 标签 选择 符 代码 。 


话 框 中 进行 设置 ， 单 击 “ 保 存 ” 


[657F| 执 行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


E E E y 


提问 : margin 元 素 有 何 作用 ? 
答 : 本 实例 中 标签 选择 符 img 中 的 属性 margin 用 来 设置 元 素 与 元 素 之 
间 的 距离 。 


ERE 大 类 选择 器 


在 制作 网 页 的 过 程 中 ， 可 以 根据 网 页 设计 的 实际 需要 ， 类 选择 器 可 以 使 用 同一 个 class 
定义 多 个 元 素 ， 类 选择 器 的 语法 格式 如 下 : 
-p í 
font-size: 9px; 
font-weight: lighter; 
background-color: #096; 
width: auto; 
} 


在 定义 类 选择 器 时 ， 需 要 在 选择 器 名 称 的 前 面 加 一 个 英文 句点 〈. ) ， 
例如 . font {font-size: 10px] 。 


[=b 实例 77+ 视频 : 使 用 类 选择 符 | 


in rT 

f 源 文件 : 源 文件 \ 第 5 章 \5-5-2. html S) 操作 视频 : 视频 \ 第 5 章 \5-5-2. swf 
[EBI] s40 SEV EAN 修改 (M) | 

新 建 (N)… Ctrl+N | 

新 娃 流 体 网 格 布 局 (.. 

打开 (0) D Ctrl+O 

E Bridge PNA). CA 

打开 最 近 的 文件 , 

ERRA)... Ctrl+Shift+O 

关闭 (O CtrlI+W 

全 部 关闭 日 Ctrl+Shift+W 


COPT 文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 活 框 中 选择 “素材 \ 第 5 章 \55201html”， 
单 击 “打开” 按钮 ， 打 开 素 材 。 
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.ImG 
margin:O0px 6px Opx 6px| 


</style> 
</head> 


<body> 
<div id="box"> 
<div id="pic"> 


[02 pJE2 F12 键 在 浏览 器 中 预览 该 页 面 ， 单 击 “代码 ”按钮 ， 打 开 代 码 视 图 窗口 ， 输 入 相 
应 的 类 选择 符 代码 。 


[94 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 对 活 框 中 进行 设置 Pas “保存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : 类 选择 符 与 标签 选择 符 有 什么 区 别 ? 
答 : 标签 选择 符 定义 的 是 所 有 定义 的 标签 元 素 ， 而 类 选择 符 可 以 通过 
class 名 称 来 定义 不 同 的 元 素 ， 人 允许 重复 使 用 。 


EE 江油 id 选择 器 


id 选择 器 可 以 定义 HTML 页 面 中 某 一 个 特定 的 元 素 ， 即 一 个 网 页 中 只 能 有 一 个 元 素 使 
用 某 一 个 id 属性 值 ，id 可 以 理解 为 一 个 标识 ， 在 网 页 中 每 一 个 id 名 称 只 能 使 用 一 次 ， 具 
有 唯一 性 ，id 选择 器 的 语法 格式 如 下 : 


Ca 


#main { 
font-size: 16px; 
font-style: italic; 
line-height: normal; 
color: #30E; 

} 


m 实例 78+ 视频 : 使 用 id 选择 符 


f 源 文件 : 源 文件 \ 第 5 章 \5-5-3.html 
EES s409 (Vv 和 (WD 修改 (M) 
FEN)... Ctrl+N 


E Bridge PMA CFAO 

HABERET) , 

WEERA)... Ctrl+Shift+O 

关闭 (QO C+W x T = 
全 部 关闭 (E) Ctrl+Shift+W GARA) evano [CR 


EDAG “Xt > TP SO, EUNN “HE IRERE AE M5 ESSO ， 
单 击 FF 按钮 ， 打 开 素材 


—"images/55103.3pg" width= 


src="images/S55104.3jpg" width= 


"132" height="126"></div> 
</div> 


CIDE FI REMAR PARAAN, 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 可 以 看 
到 自 定义 的 id 标签 。 


id 选择 符 和 class 选择 符 均 是 CSS 提供 的 由 用 户 自 定义 标签 名 称 的 一 
种 选择 符 模式 ， 用 户 可 以 使 用 id 和 class 对 页 面 中 的 HTML 标签 名 称 进行 自 
定义 ， 从 而 达到 扩展 HTML 标签 和 组 合 HTML 标签 的 目的 。 
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#pic2( 


#picit height:125px; 
n width:132px; 
height :125px; float:left; 

i . . margin-left:8px; 
width:132px; margin-right: 8px; 
float:left; et 

k P. . . height:125px; 
margin-left:8px; width:132px; 
margin-right :8px; flost:left; 

margin-left:8px; 
1 margin-right:8px; 


[ 03 P| 在 <head> 标签 中 输入 相应 的 id 选择 符 代 码 。 使 用 相同 的 方法 ， 完 成 其 他 id 标签 选 
择 符 代码 的 添加 。 


| 


[ 04 PHT “X> 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 “ 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


提问 : id 选择 符 有 什么 作用 ? 
答 : 使 用 id 选择 符 , 用 户 可 以 自 定义 名 称 ， 有 助 于 细 化 页 面 的 界面 结构 ， 
使 用 符合 页 面 需求 的 名 称 来 进行 结构 设计 ， 可 以 增强 代码 的 可 读 性 。 


554 通 配 选 择 器 


在 网 页 设计 中 ， 可 以 使 通 配 选择 器 设置 页 面 中 所 有 的 HTML 标签 使 用 同一 种 样式 ， 它 
对 所 有 的 HTML 元 素 起 作用 ， 通 配 选 择 器 的 语法 格式 如 下 : 
margin:0px; 
border:0px; 
padding: 0px; 
font-size: 16px; 
font-style: italic; 
line-height: normal; 
} 


时 通配符 中 的 *# 就 如 同 DOS 命令 中 的 *.* 表 示 所 有 文件 ，*. bat 表示 所 有 
扩展 名 为 bat 的 文件 ， 可 以 对 对 象 使 用 模糊 指定 方式 进行 选择 。 


| lt _ #5š css#m y 


f 源 文 件 : 源 文件 \ 第 5 章 \5-5-4 html A 操作 视频 : 视频 \ 第 5 章 \5-5-4. swf 
EAB s49 SEV 和 AD BEM) en 


Es Ctrl+N 


在 Bridge TAAG). Ctrl+Alt+O 

打开 最 近 的 文件 (T) 上 

在 框 染 中 打开 (月 .… Ctrl+Shift+O 

关闭 (O Ctrl+W = 
全 部 关闭 (E) Ctrl+Shift+W 


[TP] 执行 “文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 5 章 \55401 hl”， 
单 击 “ 打 开 ″ 按钮 ， 打 开 素 材 。 


<style type="text/css"> 
margin: Opx; 


border: Opx; 
padding: Opx; 


#body( 
height: 672px; 


(02 PE F12 健在 浏览 器 中 预览 该 页 面 ， 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 输 入 通 
配 符 代 码 。 


ip qi sN fe 


[03 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ” 对 话 框 中 进行 设置 pes RE 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


© 5 > 网 页 制作 > 全 程 揭秘 ] 


提问 : 通 配 选择 器 的 作用 范围 有 哪些 ? 
答 : 通 配 选 择 器 中 的 * 表示 应 用 于 所 有 对 象 ， 包 含 所 有 不 同 的 id, +E] 
的 class 的 HTML 的 所 有 标签 。 


5.5.5 组 合 选择 器 


组 合 选择 器 是 指 将 多 种 选择 器 进行 组 合 使 用 ， 如 将 标签 选择 器 和 类 选择 器 组 合 或 将 类 
选择 器 和 id 选择 器 组 合 等 ， 组 合 选择 器 的 语法 格式 如 下 : 

hl p í 

) 


时 CSS 在 选择 器 的 使 用 上 是 非常 自由 的 ， 用 户 可 以 根据 需要 灵活 选择 和 组 
合 各 种 选择 器 。 


1.5.6 CSS 选择 器 声明 | 


使 用 CSS 选择 器 可 以 控制 HTML 标签 的 样式 ， 不 但 可 以 在 每 个 选择 器 属性 中 声明 多 
个 CSS 属性 来 修饰 HTML 标签 ， 还 可 以 同时 定义 多 个 选择 器 的 属性 。 


561 Eisi 


除了 可 以 对 单个 HTML 元 素 进行 样式 设置 外 ， 还 可 以 对 一 组 选择 器 进行 相同 的 样式 设 
置 ， 群 选择 器 的 语法 格式 如 下 : 


hl,h2,p,span { 
font-size: 16px; 
font-style: italic; 
line-height: normal; 


在 定义 群 选择 器 时 ， 需 要 使 用 逗号 对 选择 器 进行 分 隔 。 


` 


5.6.2 派生 选择 器 


使 用 派生 选择 器 可 以 针对 某 一 个 对 象 中 的 子 对 象 进 行 样式 设置 ， 对 象 之 间 使 用 空格 作 
为 分 隔 ， 派 生 选 择 器 的 语法 格式 如 下 : 
hl span( 
font-size: 16px; 
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font-style: italic; 
line-height: normal; 
} 


font-size:16px、 font-style: italic 和 line-height: normal 样式 将 应 用 在 <hl> 标签 下 的 
<span> 标签 中 的 内 容 上 。 


% 对 于 单独 的 <h1> 标签 或 者 单独 的 <span> 标签 ， 以 及 其 他 标签 下 的 
<span> 标签 将 不 会 应 用 此 样式 。 


57 伪 类 及 伪 对 象 | 


伪 类 和 伪 对 象 是 一 种 特殊 的 类 和 对 象 ， 它 属于 CSS 的 一 种 扩展 型 类 和 对 象 ， 名 称 不 可 
以 自 定义 ， 必 须 按照 标准 格式 进行 应 用 ， 使 用 格式 如 下 : 
a:link { 
font-size: 12px; 
color: #OFF; 
word-spacing: normal; 
border-top-style: dotted; 
border-right-style: dotted; 
border-bottom-style: dotted; 
border-left-style: dotted; 


) 

伪 类 和 伪 对 象 有 两 种 形式 组 成 ， 分 别 是 “选择 器 : 伪 类 ”和 “选择 器 : 伪 对 象 ”， 伪 
类 用 于 指定 连接 标签 a 当 鼠 标 移 至 其 上 方 时 的 状态 ，CSS 样式 内 置 了 几 个 标准 的 伪 类 用 于 
用 户 的 样式 定义 如 下 : 


伪 类 用 途 

: link a 链接 标签 未 被 访问 前 的 样式 

: hover 将 鼠标 移 至 鼠标 上 时 的 样式 

: active 对 象 被 用 户 单 击 以 及 被 单 击 释放 之 前 的 样式 
: visited a 链接 对 象 被 访问 后 的 样式 

: focus 对 象 成 为 输入 焦点 时 的 样式 
: first-child 对 象 的 第 一 个 子 对 象 的 样式 

: first 对 于 页 面 的 第 一 页 使 用 功能 的 样式 

CSS 样式 还 内 置 了 几 个 标准 的 伪 对 象 用 于 用 户 的 样式 定义 ， 具 体 如 下 : 
伪 类 用 ë 
: after 设置 某 一 个 对 象 之 后 的 内 容 


IE 


医 @ 驳 naTML 5 > 网 页 制作 > 全 程 揭秘 
( 续 表 ) 
伪 类 用 ë 
: first-letter 对 象 内 的 第 一 个 字符 的 样式 设置 
: first-line 


对 象 内 第 一 行 的 样式 设置 


: before 


设置 某 一 个 对 象 之 前 的 内 容 


5.8 本 章 小 结 


本 章 主 要 讲解 了 在 网 页 制作 方面 起 重要 作用 的 CSS 样式 的 概念 、 分 类 和 选择 器 等 基础 
知识 ， 以 及 XHTML 的 相关 知识 。 通 过 本 章 的 学 习 ， 读 者 可 以 熟练 掌握 创建 和 应 用 CSS 样 


式 的 方法 和 技巧 。 
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SVG 是 采用 HTML 标签 形式 创建 一 种 可 缩放 的 矢量 
图 形 技 术 ， 用 于 描述 2D 图 形 和 图 形 应 用 程序 ， 并 且 SVG 
与 CSS 和 Javascript 具有 非常 好 的 兼容 性 ， 这 可 以 使 Web 
开发 人 员 很 容易 习惯 与 掌握 该 技术 。 


(6.1 SVG 的 基础 概要 


SVG 是 一 种 可 缩放 的 矢量 图 形 技术 (Scalable Vector 
Graphics， 简 称 SVG) ， 该 技术 使 用 XML 来 描述 二 维 图 
形 的 语言 (SVG 严格 遵从 XML 语法 ) 。 

EZEN 为 什么 要 使 用 SVG 

在 HTML 4 时代， 浏览 器 中 显示 的 图 像 大 多 都 是 
jpeg. gif $A png 等 格式 ， 这 些 都 属于 位 图 图 像 ， 而 位 图 图 
像 格 式 是 基于 像素 的 , 在 图 像 中 定义 了 每 个 像素 的 颜色 值 
浏览 器 读 取 这 些 值 并 做 出 相应 的 显示 。 


这 种 图 像 的 再 现 能 力 比 较 强 ， 但 是 在 某 些 情形 下 会 显 
得 不 足 。 例 如 当 浏 览 器 以 不 同 大 小 显示 一 幅 图 像 时 ， 通 常 
会 产生 锯齿 边缘 ， 这 时 浏览 器 不 得 不 为 那些 在 原始 图 像 中 
不 存在 的 像素 插入 一 些 猜测 的 颜色 数值 ， 这 就 会 导致 图 像 
出 现 失 真 的 现象 。 


s 


而 矢量 图 是 根据 几何 特性 来 绘制 图 形 ， 通 过 指定 每 个 
像素 的 值 所 需 的 指令 ， 而 不 是 指定 这 些 值 本 身 ， 克 服 了 这 
些 困难 中 的 一 部 分 。 例 如 需要 绘制 一 个 直径 为 lcm 的 圆 ， 
矢量 图 形 不 再 为 这 个 圆 提供 任何 像素 值 ， 而 是 直接 告诉 浏 
览 器 创建 一 个 直径 为 lcm 的 圆 ， 然 后 让 浏览 器 (或 插件 ) 
做 其 余 事情 ， 这 就 消除 了 像素 图 形 的 许多 限制 。 


| 
| 


了 解 SVG 的 基础 


[q] 


区 ] 认识 SVG 的 语法 结构 
V) 掌握 SVG 绘制 图 形 的 方法 


区 ] 掌握 SVG 绘制 文本 的 方法 


q 


掌握 SVG 绘制 渐变 的 方法 


区 5 对 HT 5 》 网 页 制作 》 全程 揭 秘 ) 


W3C 推荐 的 SVG 规范 有 SVG 1.1. SVG Tiny 1.2, SVG Mobile 1.1 三 种 。 在 Windows 
系统 计算 机 中 ，Web 浏览 器 中 支持 的 是 SVG 1.1， 本 章 也 将 着 重 介绍 SVG 1.1 规范 。 

Internet 5 Explorer 从 版 本 5 开始 支持 被 称 为 VML 的 语言 ， 而 该 语言 是 基于 SVG 的 
矢量 图 形 语言 ， 但 当时 却 没有 支持 SVG， 因 为 SVG 是 由 多 个 模块 构成 的 巨大 规范 ， 在 
Internet Explorer 以 外 的 浏览 器 中 受到 的 支持 情况 并 不 顺利 ， 因 此 很 长 一 段 时 间 内 SVG 并 
没有 被 广大 的 Web 开发 人 员 所 接受 。 

但 是 在 2010 年 3 月， 微软 公司 宣布 在 Internet Explorer 9 中 全 面 支持 SVG， 其 他 的 
Web 浏览 器 也 一 起 同步 支持 ， 一 时 间 SVG 受到 了 大 家 的 一 致 关注 。 


6.1.3 


SVG 是 由 XML 语言 记录 的 ， 因 此 SVG 文件 可 以 通过 文本 编辑 器 进行 编辑 ， 可 以 充分 
发 挥 文本 文件 的 便利 性 。 

但 是 当 绘制 复杂 图 像 或 图 形 时 ， 文 件 将 会 变 得 很 大 ， 这 往往 会 成 为 问题 所 在 。 此 时 使 
用 gzip 工具 进行 压缩 ， 文 件 的 后 缀 也 将 变 成 .gz。 


gzip 是 GNUzip 的 缩写 ，gzip 最 早 由 Jean-loup Gailly A Mark Adler 
创建 ， 用 于 UNIX 系统 的 文件 压缩 。gzip 现今 也 已 经 成 为 Internet 上 使 用 
非常 普遍 的 一 种 数据 压缩 格式 。 


SVG 作为 图 像 格式 ， 已 经 有 多 个 图 像 处 理 软件 支持 读 写 SVG 形式 的 图 像 。 专 业 性 图 
像 处 理 软件 如 Adobe 公司 旗下 的 Illustrator 和 微软 公司 的 Office Visio 等 软件 ， 免 费 图 像 处 
理 软件 如 Inkscape 等 都 支持 读 写 SVG 格式 图 像 。 特 别 是 Inkscape， 该 软件 是 以 SVG 为 标 
准 图 像 格式 而 进行 开发 的 ， 支 持 SVG 的 绝 大 多 数 功能 。 


SVG 在 浏览 器 中 的 显示 方法 | 


在 HTML 5 中 可 以 将 SVG 直接 嵌入 (内 和 嵌 式 SVG) 到 HTML rh, BH NB i Ç 
SVG 的 有 Internet Explorer 9 和 Firefox 4beta 以 及 更 高 版 本 。 
@ 将 SVG RAEI <object> 标签 中 
通过 <object> 标签 将 SVG 文件 链接 到 HTML 文档 中 是 一 种 较为 简便 的 显示 SVG 的 方 
式 ， 代 码 的 书写 方式 如 下 : 
<object data="map.svg" type="image/svg+xml"></object> 
在 上 面 的 代码 中 ， 通 过 data 属性 指定 SVG 文件 的 路 径 ， 然 后 通过 sype 属性 告诉 浏览 
器 文件 的 类 型 。 
@ 将 SVG RAEI <iframe> 标签 中 
将 SVG RA <object> 标签 中 也 是 比较 方便 的 方法 ， 如 img 元 素 的 src 属性 ， 代 码 的 书 
写 方式 如 下 : 


<iframe src="map.svg"></iframe> 


在 上 面 的 代码 中 ， 通 过 src 属性 指定 SCG 文件 的 路 径 ， 然 后 直接 在 浏览 器 中 进行 显示 ， 
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同时 用 户 也 可 以 通过 width 和 height 属性 定义 SVG 图 像 的 大 小 ， 代 码 如 下 所 示 : 


<iframe src="map.svg" width="300" height="300"></iframe> 


有 实例 80+ 视频 : 


将 SVG 图 像 链 接 到 HTML 文档 中 


j ' 
A 操作 视频 : 视频 \ 第 6 章 \6-1-4. swf 
E5) 


== " 
=a 
5 a 
Sm 
= 
a 
| i 
| < 
aa L SK 
本 过 . 
= Z 


(o Pj 执行 “文件 > 新建” 命令 ， 新 建 一 个 空 自 的 HTML 5 文档 。 按 快捷 键 Ctrl+S 将 文档 
保存 为 “ 源 文件 \ 第 6 章 \6-1-4.html”。 


<!doctype html> n 一 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
Xiframe src="images\61401.svg"></iframe> 
</body> 
</html> 


( 02 p JE <body> 标签 下 输入 <iframe> 标签 以 及 其 中 的 各 项 属性 。 按 F12 键 测试 页 面 中 的 
SVG 图 像 效果 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


</head> 


<body> 

<iframe src="imagesN61401.svg" height= 
"1000px" width="1000px"></iframe> 
</body> 

</html> 


[ 03 返回 Dreamweaver 软件 中 ， 为 <iframe> 标签 添 加 height 属性 和 width 属性 ， 以 及 其 
中 的 属性 值 。 再 次 按 F12 键 观察 SVG 图 像 发 生 的 变化 。 


© OUDIO ) 
r° 


条 提问 : 还 可 以 通过 什么 标签 将 SVG 文件 嵌入 到 HTML 文档 中 ? 
Z: SVG 文件 除了 可 以 通过 标签 <object> 和 <iframe> 嵌入 到 HTML 


文档 中 ， 还 可 以 通过 标签 <embed> AE] HTML 文档 中 。 


6.2 SVG 的 语法 基础 


SVG 具有 自己 独特 的 语法 ， 要 绘制 SVG 图 形 ， 就 必须 要 了 解 SVG 的 语法 ， 本 节 将 对 
SVG 的 语法 基础 进行 介绍 。 

SVG 文档 属于 XML 类 型 文档 , 主要 由 XML 声明 、 文 档 类 型 声明 和 根 元 素 3 个 元 素 构成 。 
如 下 方 的 代码 书写 方式 : 

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ 

Graphics/SVG/1.1/DTD/svg11.dtd"> 


<svg width="50" height="50" xmlns="http://www.w3.org/1999/xlink"></svg> 


@ 第 一 行 

从 本 质 上 说 , SVG 文档 就 是 XML 文档 ， 
所 以 文档 应 该 以 XML 声明 , 也 就 是 以 <?xml 
version="1.0"?> 开始 。 

其 中 的 version 属性 表示 XML 的 版 本 ， 
因为 解析 器 对 不 同 版 本 的 解析 会 有 区 别 ， 
尽管 目前 版 本 只 有 1.0 版 本 ， 但 在 声明 中 必 
须 指 定 version 属性 。 

encoding 属性 用 于 指定 一 个 字符 编码 
集 。 由 于 可 以 采用 不 同 的 字符 编码 集 来 书 XML 文档 通过 使 用 DOCTYPE 声 
5 XML 文档 ， 所 以 浏览 器 、 软 件 工具 或 者 ! 了 明 语 句 来 指明 它 所 遵循 的 DID 文件 。 


! DTD 是 一 套 关于 标记 符 
! 
' 
' 
i 
分 析 器 就 需要 知道 该 XML 文档 所 使 用 的 字 i DOCTYPE 声明 语句 紧 跟 在 XML 文档 声明 


的 语法 规则 。 它 是 XML 1.0 
版 本 规则 中 的 一 部 分 。 


standalone 属性 的 默认 


值 是 "yes"。 


`` S 


ə 第 二 行 


符 编码 方式 。 语句 后 面 ， 有 两 种 格式 : 
standalone R 性 用 于 规 定 SVG 文件 是 es C s a ae 

否 是 独立 的 文档 ， 如 果 将 其 设置 为 "yesn， — 

则 表示 该 文档 没有 依赖 外 面 的 任何 文件 ， ， 称 。wp1D 文 件 的 RE"> k 

而 可 以 独立 存在 ， 既 不 需要 DTD 文件 来 验 TERASE RME 文档 编写 者 

证 其 中 的 标识 是 否 有 效 ， 也 不 需要 XSL 或 


自己 定义 ， 一 个 通用 的 习惯 是 使 用 XML 文 


CSS 文件 来 控制 其 显示 外 观 。 档 的 根 元 素 名 称 来 作为 文档 类 型 名 称 。 
将 standalone 属性 设置 为 "no" 时 ， 则 @ =: a 已 
表示 该 文档 依 天 于 外 面 的 某 个 文件 ， 例 如 s s s 3. 
依赖 于 某 个 DID 文件 、XSL 文件 或 者 是 le te 
et 只 有 它 可 以 包含 其 他 元 素 。 


关键 字 SYSTEM 表明 XML 文件 所 遵 
循 的 是 一 个 本 地 或 组 织 内 部 所 编写 和 使 用 
的 DTD 文件 。 

关键 字 PUBLIC 表明 该 XML 文件 所 
遵循 的 是 一 个 由 权威 机 构 制 定 的 、 公 开 提 
供给 特定 行业 或 公众 使 用 的 DID 文件， 而 
不 是 某 个 组 织 内 部 的 规范 文件 。 

“DTD 名 称 ” 用 于 指定 该 DTD 文件 
的 标识 名 称 ， 它 只 在 使 用 关键 字 PUBLIC 
的 DOCTYPE 声明 语句 中 出 现 。 

DTD 标识 名 称 应 符合 一 些 标准 的 规定 ， 
对 于 ISO 标准 的 DTD 以 ISO 开头 ; 被 改进 
的 非 ISO 标准 的 DTD 以 加 号 +" FA; 
未 被 改进 的 非 ISO 标准 的 DTD 以 减 号 “-” 
开头 。 紧 跟着 开始 部 分 后 面 的 是 双 斜 枉 “// 
及 DTD 所 有 者 的 名 称 ， 在 这 个 名 称 之 后 又 
是 双 和 斜 杠 “/”， 之 后 是 DTD 所 描述 文件 
的 说 明 ， 最 后 在 双 和 斜 杠 “//” 之 后 是 语言 的 
种 类 。 

“DTD 文 件 的 URL” 部 分 指定 该 
DTD 文件 所 在 的 位 置 。 对 于 使 用 PUBLIC 


(6.3 绘制 SVG 基本 图 形 


第 6 章 SVG K 


属性 的 DOCTYPE 语句 ，“DTD 文件 的 
URL” 指 定 该 DTD 文件 在 Internet 上 的 绝 
对 URL， 例 如 用 于 Java Web 应 用 程序 的 配 
置 文件 的 DTD 文件 的 位 置 为 : 


app_2_3.dtd" 


"http://java.sun.com/dtd/Web- 


除了 输入 互联 网 上 的 一 
个 绝对 URL 外 ， 它 还 可 以 是 
一 个 本 地 文件 的 相对 路 径 。 


@ 第 三 行 

<svg> 标记 用 于 标注 这 是 一 个 SVG 文 
档 ，SVG 文档 的 宽 和 高 用 height 和 width 
属性 来 定义 ， 如 果 不 定 义 width 和 height 
属性 的 话 ， 画 布 的 范围 将 是 整个 浏览 器 ， 
在 指定 width 和 height 后 ， 我 们 实际 上 就 
建立 了 一 个 显示 图 形 的 显示 区 ， 单 位 可 以 
使 用 em. ex. px. pt. pc. cm 和 mm， 如 
果 不 指定 单位 ， 则 默认 的 单位 是 像素 点 。 

SVG 文 档 以 根 元 素 <svg> 开始 ， 包 含 
开始 标签 <svg> 和 结束 标签 </svg>，xmlns 
属性 定义 了 SVG 的 名 称 空 间 。 


本 节 开 始 对 SVG 基本 图 形 的 绘制 进行 介绍 ，SVG 中 提供 了 很 多 的 基本 形状 ， 用 户 可 


以 对 这 些 元 素 进 行 直接 使 用 。 


6.3.1 EtA 


使 用 rect 元 素 可 以 绘制 矩形 效果 ，x 和 y 属性 用 于 定义 矩形 左上 角 的 坐标 位 置 ， 宽 度 
和 高 度 由 width 和 height EX, ry 属性 定义 矩形 的 圆 角 半径 。 


Ran 81+ 视频 : 


SER E 8515 


* 
n 


EE 


š 源 文件 : 源 文件 \ 第 6 章 \6-3-1. html 


操作 视频 : 视频 \ 第 6 章 \6-3-1. swf 
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PT TS TT] 


Cam 


[01 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 按 快捷 键 Ctrl+S 将 文档 
保存 为 “ 源 文件 \ 第 6 章 \6-3-1.html”。 


<!doctype html> 
<html> 


<!doctype html> 


kenas <html> 
ea 
<meta charset="utf-8"> aa 
<title> 无 标题 文档 </title> Seta Maraera Wee 
¿atg We inca <title> 无 标题 文档 </title> 
</head> <svg version="1.1" 
width="400" height="200"> 
<body> </svg> 
Sody> </head> 


</html> 


[ 02 P| 在 </head> 标签 上 方 输入 <svg> 标签 对 ， 并 在 其 中 输入 version 属性 以 及 版 本 号 。 使 
用 width 属性 和 height 属性 设置 SVG 画布 的 大 小 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<svg version="1,1" 
width="700" height="400" 
xmlna="http://www.w3.org/2000/svg"> 


.¥3.ora/2000/ava"> 


</svg> > sor 2390"260" prisht=200" ycylr-ofilla406oie/> 
</head> m> 
“sa 
<body> <body> 
</body> Ts: 
</html> 


OPRA SVG 的 名 称 空间 ， 继 续 输入 <rect> 标签 ， 添 加 x、y、style 和 宽 高 属性 ， 设 置 矩 形 
的 位 置 、 大 小 以 及 颜色 。 


a aso 


[ 04 使 用 相同 的 方法 再 次 绘制 一 个 矩形 ， 并 为 其 添加 ry Et, PERUEPRELS EY E. 
F F12 键 测试 绘制 的 矩形 效果 。 


第 6 章 SVG KM 


A 提问 : 如 何 设置 绘制 矩形 的 样式 ? 
答 : 用 户 可 以 通过 style 属性 为 绘制 的 矩形 定义 填充 颜色 透明 度 和 笔触 
颜色 的 透明 度 等 样式 。 


632 绘制 圆 形 


使 用 元 素 可 以 绘制 圆 形 效 果 ，cx 和 cy 属性 用 于 定义 圆 的 中 心 坐标 位 置 ， 同 时 使 用 r 属 
性 定义 半径 。 


m 实例 82+ 视频 : 使 用 SVG 绘制 正 贺 


fa CHIEN EE 


f 源 文件 : 源 文件 \ 第 6 章 \6-3-2.html 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

<svg version="1.1" 
width="800" height="800"> 


(Ot PBU “CBR NE @ Q, SEAS BJ HTML 5 文档， 在 <head> 标签 上 方 输 
入 <sve> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> <!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<avg version="1.1" 
width="g00" height="800" earele emanon Ga00" z200" seyie=tra11s499C:"/> 
xmins="http://www.w3.org/2000/svg">  </neaa> 
</svg> 
</head> sss 
<jaeaay 
<body> 
</body> 
</html> 


[ 02 P| 在 画布 大 小 属性 下 方 输入 SVG 的 名 称 空 间 。 继 续 输入 <circle> 标签 ， 添 加 cx. cy. 
style 和 T 属 性， 设置 圆 形 的 位 置 、 半 径 以 及 填充 颜色 。 
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H. 


"g 
mmap: Eremi - 
ORAND [K nomema it hont eet ana akta Me are) 


a m. G mu m, 


[as 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 6 章 \6-3-2 html”, j F12 键 
测试 页 面 中 的 SVG 圆 形 绘制 效果 。 


提问 : 可 否 省 略 cx 和 cy 属性 ? 
答 : 用 户 在 使 用 circle 绘制 图 形 的 时 候 可 以 省 略 cx 和 xy 属性 ， 此 时 加 
的 中 心 会 被 设置 为 (0, 0)。 


使 用 ellipse 元 素 绘制 椭圆 ， 使 用 cx 和 cy 属性 定义 椭圆 的 中 心 坐标 ，rx 属性 定义 椭圆 
的 长 轴 半 径 ，ry 属性 定义 椭圆 的 短 轴 半径 。 


mb 实例 83+ 视频 : 使 用 SVG 绘制 椭圆 


m: 2 rm - w + 


f 源 文件 : 源 文件 \ 第 6 章 \6-3-3.html 


A 操作 视频 : 视频 \ 第 6 章 \6-3-3, swf 


FE < doctype html> 


an was ¿+a ses am wm 


<meta charset="utf-8"> 

J <cicle> 无 标题 文档 </citle> 
avo version="1.1" 
width="800" height="800" 


_01 PP] 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


fa T | 
[ 02 P| 输入 SVG 的 名 称 空间 ， 以 及 椭圆 形状 属性 代码 。 将 文档 保存 为 “ 源 文件 \ 第 6 章 
\6-3-3.html”， 按 F12 键 测试 绘制 的 椭圆 效果 。 


个 
< 。 记 问 ， 邑 此 浏览 器 支持 内 联 sve ? 
答 : Internet Explorer 9. Firefox. Opera. Chrome 和 Safari 浏览 器 支持 
内 联 SVG。 


6.3.4 | 


使 用 line 元 素 可 以 绘制 出 直线 效果 ， 使 用 xl 和 yl 属性 定义 直线 的 起 点 坐标 ， 使 用 x2 
和 y2 属性 定义 直线 的 结束 坐标 。 


有 实例 84+ 视频 : 使 用 SVG 绘制 直线 


中 m. G : m - mv + 


f 源 文件 : 源 文件 \ 第 6 章 Vé-3-4 html 


GEE <meta charset="utf-8"> 
<title> 无 标题 文档 </title> 

PEN <svg version="1.1" 

width="800% height="800" 


[Lo1 P| 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 
width="800" height="400" 
xmins="http://www.w3.org/2000/svg"> 
<line xi="400" yi="230" x2="200" y2="100" style="stroke:#F39;"/> 
</svg> 


[ 02 P| 输入 SVG 的 名 称 空间 ， 输 入 完成 后 ， 在 其 下 方 输入 <line> 标签 ， 添 加 XI. yl. x2 
y2 和 style 等 属性 ， 设 置 直线 的 起 始 位 置 和 结束 位 置 以 及 线条 颜色 。 


<!doctype html> 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1,.1" 
width="800" height="400" 

xmlns="http://www.w3.org/2000/svg"> 

<line x1="400" y1="230" x2="200" y2="100" style="stroke:#F39;"/> 
<line x1="200" y1="100" x2="50" y2="300" style="stroke:#F39;"/> 
<line x1="400" y1="230" x2="280" y2="400" style="stroke:#F39;"/> 
</svg> 


[ 03 Pj 使 用 相同 的 方法 再 次 绘制 另外 两 条 直线 。 


a on a nommas i a “no 于 


smao rimi r 
MMDD — i 


was 人 


Dus moa Ek sma nanat) 
Bato- mv + 


[ 94 Pj 执 行 “文件 > 保存 " 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 6 章 \6-3-4.html”， 按 F12 
键 测试 绘制 的 直线 效果 。 


wW 


提问 : 在 使 用 1ine 绘制 直线 时 ， 可 否 指定 填充 颜色 ? 
答 : 用 户 在 使 用 line 绘制 直线 的 时 候 ， 可 以 指定 颜色 ， 但 无 法 指定 填充 
颜色 。 


| 635 绘制 折线 与 多 角 星 形 


使 用 polyline 和 polygon 元 素 可 以 绘制 出 折线 或 多 角 星 形 效果 ， 绘 制 这 两 种 效果 都 是 通 
过 point 属性 进行 每 一 条 线段 的 端点 坐标 指定 ， 而 两 者 的 区 别 在 于 是 否 将 开始 点 与 结束 点 进行 
连接 闭合 。 下 面 为 折线 效果 的 代码 书写 方式 : 
<svg version="1.1" width="800" height="500" xmlns="http://www.w3.org/2000/svg"> 
<polyline points="200,200 500,180 55,500" style="stroke:#F39" stroke-width="3px" 
fil1="none" /> 
</svg> 


f 源 文件 : 源 文件 \ 第 6 章 \6-3-5.html A 操作 视频 : 视频 \ 第 6 章 \6-3-5. swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 
width="800" height="500" 
</svg> 

</head> 


<body> 
</body> 
</html> 


01 P| 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> 


<html> 

<head> 

<meta charset="utf-8"> <Idoctype html> 
<title> 无 标题 文档 </title> — 


<head> 


<svg version="1.1" 
width="800" height="500" 


xmlns="http://www.w3.org/2000/svg"> o0 
</svg> aas- "htrpz//wwm.w3.arg120001avg> 
<polygon peirt=—"4S9,47 589,445 249,198 669,108 330,445" 

</head> Ppa 

<head>. 
pesa <roay> 
</body> </body> 
</html> cpemly 


[02 P| 在 画布 大 小 属性 下 方 输入 SVG 的 名 称 空间 。 继 续 输入 <polygon> 标签 ， 并 在 该 标签 
中 定义 五 角 星 每 一 个 角 点 的 坐标 数值 。 


<!doctype html> 
hemly 
<head> 
<meta charset="utf-3"> 
<=icley 无 标 是 文档 < 
<svg vezrsion="1 
wicta=mgoo" beight=msoo" 
xains=mntrp://www. w3 .0rg/2000/svg"> 
<pclygor points="459,47 589,445 249,198 669,198 330,445" 
azyle="atroke:F39" s:roke-width=-"3px" £i1i="none"/> 
<rsvg> 
</head> 


<body> 

</body> 

</hen1> | 
| 


[ 03 FP] 定 义 五 角 星 的 线条 颜色 和 线条 粗细 等 属性 。 按 快捷 键 Ctrl+S， 将 文档 保存 为 “ 源 文 
件 \ 第 6 章 \6-3-5.html”， 按 Fl2 键 测试 页 面 中 绘制 的 五 角 星 效果 。 
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提问 : 可 和 否 为 SVG 元 素 添加 滤 镜 ? 
答 : 用 户 可 以 在 每 个 SVG 元 素 上 使 用 SVG 滤 镜 ， 从 而 向 形状 和 文本 添 
加 特殊 的 效果 。 


J 使 用 path 元 素 绘制 图 形 


使 用 path 元 素 也 可 以 绘制 各 种 各 样 的 图 形 效果 ， 上 面 所 介绍 的 基本 图 形 ， 使 用 path 
元 素 同样 也 可 以 实现 。 但 是 使 用 path 元 素 进行 绘图 时 ， 步 又 了 略微 复杂 一 些 。 

path 元 素 通过 将 命令 与 坐标 进行 组 合 来 绘制 图 形 ， 以 “命令 + 参数 1+ 参数 2” 作 为 一 
个 集合 ， 参 数 与 参数 之 间 可 以 以 空格 或 者 逗号 进行 间隔 。 


% 命令 为 大 写字 母 时 , path 元 素 的 坐标 为 绝对 坐标 。 当 命令 为 小 写字 母 时 ， 
path 元 素 的 坐标 为 相对 坐标 。 


=b 实例 86+ 视频 :使 用 path 元 素 绘制 五 角 星 
ER =s I =— 


<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 

7 width="800" height="500" 
EN </3vo> 

El </head> 


本 时 <body> 
El </body> 
</html> 


[ol 是 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<svg version="1.1" 
width="800" height="500" 


< 500" 
xmlns="http://www.w3.org/2000/svg"> xmins=*http: / /wav.v3.org/2000/svg"> 
<path d="M459,47 1589, 445 L249,198 L669,198 1330,445 z" 


</avg> -ne 
</head> </head> 
<body> sed 
</body> Vsrsl> 
</html> 


(02 PF] 在 画布 大 小 属性 下 方 输入 SVG 的 名 称 空间 。 继 续 输入 <polygon> 标签 ， 并 在 该 标签 
中 定义 五 角 星 每 一 个 角 点 的 坐标 数值 。 


ma CC 
° neigru="s00" 
"http: //wvw.w3.ora/2000/sya"> 

<path 4="M459,47 L589,445 L249, 198 L669, 198 1330,445 z" 

croke-widt="3px" Zill="#E39"/> 
/sve> 

head> 
<body> 
/body> 
html 
: m. q nu w 


[65 认定 义 五 角 星 的 填充 颜色 和 线条 粗细 等 属性 。 按 快捷 键 Ctrl+S， 将 文档 保存 为 “ 源 广 
件 \ 第 6 章 \6-3-6.html”， 按 F12 键 测试 页 面 中 绘制 的 五 角 星 效果 。 
个 
w 提问 ，path 元 素 都 有 哪些 命令 ? 
B: path 元 素 的 命令 有 : 移动 位 置 (M) 、 描 绘 曲 线 (C) 、 描 绘 直线 (L) 、 
RAAM (A) 和 封闭 路 径 (Z) 等 。 


fa m. G : m - ae = — 
f 源 文件 : 源 文件 \ 第 6 章 \6-3-7.html A 操作 视频 : 视频 \ 第 6 章 \6-3-7. swf 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<svg version="1.1" 
width="800" height="500" 

</svg> 

</head> 


<body> 
</body> 
</html> 


[01 > 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<cicley> 无 标题 文档 </cicle> 

<svg version="1.1" 
width="800° height="500" 
xmlna="http://www.w3.org/2000/svg"> 
<g fill="#F39"> 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

<svg version="1.1" 
width="800" height="500" 
xmlns="http://www.w3.org/2000/svg"> 


</svg> P 
Dhi </head> 
<body> <body> 
</body> 15 </boay> 
</html> 16 </hcml> 


[ 02 > 在 画布 大 小 属性 下 方 输入 SVG 的 名 称 空间 ， 继 续 输入 <g> 标签 ， 并 在 该 标签 中 定义 
填充 颜色 属性 。 


<!doctype html> tqoorype nam> 


enn «arai» 
aeaa> 


<head> 
<meta chazset="utf-9"> 
<rzitle> 无 标题 文 构 </icley> 
<avg veraicn-nl.1® 
wt3:h=8800" reigh:="S00" 
s=an=—"hespi / wwe. w3 .org/2000/27g"> 
<g L111="#739"> 
<zect w="220" yrr100® wiath=mgon haighc-ogDe cy-n10r/> 
</a> 
</avg> 
</head> 


ie" 


<body> 
</body> 
/army 


<html> 


定义 一 个 圆 角 和 矩形 图 像 效果 。 使 用 相同 的 方法 定义 其 他 的 圆 


Eo 
PP ———oaÀ =— POCO 


moara 
Els wieste EA men 


(04 PRIT AERE G<, BREA ELE 6 章 \6-3-7.html”， 按 F12 
键 测试 页 面 中 的 SVG 绘制 效果 。 
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3 
< 


多 提问 : 编组 的 实现 方式 有 哪些 ? 
答 : 除了 使 用 SVGDOM 可 以 实现 编组 ， 还 可 以 使 用 相应 的 Rephael 中 
的 set 实现 与 编组 相近 的 功能 。 


EE 使 用 transform 属性 | 


用 户 可 以 通过 transform 属性 对 g 元 素 中 绘制 图 形 的 位 置 、 形 状 和 角度 等 属性 进行 整体 
的 设置 。transform 属性 所 包含 的 属性 值 及 其 功能 说 明 如 下 表 所 示 : 


属性 值 描述 说 明 
translate(x,y) 移动 整体 元 素 移动 x 轴 与 y 轴 (y 可 省 略 ， 省 略 后 默认 为 0) 
scale(x,y) 放大 / 缩小 整体 元 素 ee ole aiii ym, 
skewX(x) 向 X 轴 方向 倾斜 指定 x 轴 的 倾斜 
skewY(y) [8] y 轴 方 向 倾斜 指定 y 轴 的 倾斜 
rotate( 角 旋转 元 素 按 用 户 指定 的 cx 与 cy 坐标 为 中 心 进行 旋转 
度 ,cx,cy) (cx 与 cy 省 略 后 默认 为 0) 


= 


=> 实例 88+ 视频 : 对 编组 元 素 进行 操作 


00 °° 


eee i = 


A 操作 视频 : 视频 \ 第 6 章 \6-3-8. swf 


f 源 文件 : 源 文件 \ 第 6 章 6-3-8.html 


[01 PF] 执 行 “ 文 件 > 打开 ”命令 ， 将 “ 源 文件 \ 第 6 章 \6-3-7.html” 文 档 打 开 。 在 <g> 标 
签 中 添加 transform 属性 ， 并 指定 属性 值 为 translate。 


医 @ 基 上 TVL 5 》 网 页 制作 》 全 程 揭秘 ) 


html 


00 9 


</hen!: 
EEE 


[ 02 PERA transform 属性 添加 一 个 rotate 属性 值 。 按 快捷 键 Cul+Shift+S,， 将 文档 另存 为 “ 源 
文件 \ 第 6 章 \6-3-8html”， 按 F12 键 测试 页 面 效果 。 


提问 : 可 否 为 g 元 素 添加 X 和 y 坐标 ? 
答 : 使 用 g 元 素 时 不 能 设置 x 和 yy 坐标 ， 并 且 width. height 等 属性 也 
同样 不 能 添加 。 


@ matrix 属性 值 

transform 属性 还 有 另外 一 个 属性 值 ， 那 就 是 matrix， 使 用 该 属性 值 可 以 直接 对 移动 、 
缩放 和 旋转 同时 进行 控制 ，matrix 属性 值 包 含 了 6 个 参数 ， 分 别 为 X 轴 的 伸缩 、y 轴 的 伸缩、 
X 轴 的 倾斜 、y 轴 的 倾斜 、x 轴 的 移动 和 y 轴 的 移动 。 

需要 注意 translate 的 属性 值 是 有 先后 之 分 的 ， 例 如 下 面 两 个 代码 所 得 到 的 结果 就 是 不 
同 的， 因为 旋转 后 移动 与 移动 后 旋转 的 中 心 点 发 生 了 关系 变化 。 


transform="rotate (45) translate (50,0)" 
transform="translate (50,0) rotate (45)" 


时 


同时 用 户 还 要 注意 一 点 ，transform 的 特点 是 从 右 侧 开始 执行 。 


6.4 绘制 文本 

SVG 中 使 用 text 元 素 可 以 很 简单 地 设置 字符 串 ， 并 让 其 在 页 面 中 显示 。 但 是 这 些 字符 
串 不 能 换行 也 不 支持 禁 则 ， 这 时 候 为 了 防止 字符 串 中 途 被 截断 或 出 现 重 琶 ， 就 需要 对 其 进 
行 一 些 设置 。 


% 禁 则 是 指 禁止 掉 文 本 规定 ， 也 就 是 说 不 再 按照 字符 规定 排列 字符 ， 例 如 
当 换 行 时 ， 标 点 符号 异 能 出 现在 句子 的 开始 位 置 等 规则 。 
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[大 实例 89+ 视频 : 使 用 SVG 绘制 文本 | 


Kak ua i— -S-52 #pe- = 
HEAR 
彩云 间 
z noso s.| 


f 源 文件 : 源 文件 \ 第 6 章 \6-4.htm A 操作 视频 : 视频 \ 第 6 章 \6-4. suf 


| 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<cicle> 无 标题 文档 </cicle> 
<svg version="1.1" 
Widrth="800" height="500" 
xmlns="http://www.w3.org/2000/svg"> 
</svg> 

</head> 


<body> 
</body> 
EE </html> 


[ 01 pJ X> 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> <!doctype html> 
<html> <html> 

<head> <head> 

<meta charset="utf-8"> <meta charset="uttf-8"> 
<cicle> 无 标题 文档 </cicle> <title> 无 标题 文档 </ticle> 
<svg version="1.1" <svg version="1,1" 


0" height="500 widrh="800" height="500" 


tp://wns.w3.0rg/2000/svg"> ming-whccp://www sw3vorg/20001avgny 

<q till="08F39" ront-size="30% fonc-fesiiyn 宁 体 w> <q ti11="0F39' t-size=%30% font-family Ribos 

uo ext x="20" y=ngon> 
</svg> BRRR i 
</head> trapan xr"80” y="a0s> 

彩云 间 
oa </tspan> 
</body> </text> 
</html> “> 
</svg> 


继续 输入 <g> 标签 ， 并 添加 字符 颜色 、 字 符 大 小 以 及 字体 等 属性 。 在 <s> 标签 内 添 
加 <text> 标签 和 <tspan> 标签 ， 以 及 标签 中 的 内 容 。 


LN m ms — 
- ovm traon * + msma i -E taora 


azan 
2038071524 朝 辞 白 帝 
彩云 同 


maaar 1809 
munas 55 
msaare 
aaapol531 
amsaa 1827 
munai 2 
mun yes 
mmaa 3805 


[TCD 


| - ma 
Dag wa sa mD 


i 


| easi- m| 


[93 Pj 执行 “文件 > 保存” 命令， 将 文档 保存 为 “ 源 文 件 \ 第 6 章 \6-4.html”， 按 Fl12 键 
测试 页 面 中 的 文字 效果 。 


(© MDL J 


提问 : 如 何 调整 text 元 素 中 的 文字 ? 
答 : 用 户 可 以 通过 使 用 tspan 元 素 调整 text 元 素 内 任意 文字 的 颜色 、 大 
小 和 位 置 。 


用 户 可 以 使 用 textPath 元 素 沿 特定 的 路 径 描绘 文本 ， 路 径 的 定义 需要 将 其 放置 在 defs 
元 素 中 。 


大 实例 90+ 视频 :制作 波浪 纹路 径 文本 | 


LE 
f 源 文件 : 源 文件 \ 第 6 章 \6-4-1.html A 操作 视频 : 视频 \ 第 6 章 \6-4-1. swf 
<!doctype html> 
= <html> 
9 a eM <head> 
H => <meta charset="utf-8"> 
` pe <title> 无 标题 文档 </title> 
R pan <svg version="1.1" 


width="800" height="S00"” 


E xmlns="http://www.w3.org/2000/svg"> 
l </svg> 
E </head> 
= 
g <body> 
</body> 


[Lo1 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 SE 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> <meta charset="utf-8"> 
<html> <title> 无 标题 文档 </title> 
<head> <svg versicn="1.1® 
<meta charset="utf-8"> width="800" beight="500" 
<title> 无 标题 文档 </title> xmlns="http://www.w3.org/2000/svg"> 
<svg version="1.1" <defs> 
width="800" height="500" <path id="circlepath" 
xmins="http://www.w3.org/2000/svg"> c="M260,200 
<defs> C260,200 300,150 350,200 
<path id="circlepath”/> C350,200 400,250 440,200 
</defs> M360, 300 
</svg> C360,300 400,250 450,300 
</head> C450,300 500,350 540,300"/> 
</defs> 
UPS </svq> 


[ 02 > 输入 <defs> 标签 ， 并 在 其 中 添加 <path> 标签 。 在 <path> 标签 内 添加 d 属性 ， 并 定 
义 曲线 的 各 个 坐标 。 
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<svg version="1.1" 
widrh="800" height="500" 


height=*500% 
7Vwww.w3-org/2000/svgn> 


xml1na="http://www.w3.org/2000/svg"> <defs> 
<defs> <path id="circlepath" 
<path id="circlepath" "M260,200 
"M260,200 


C260,200 300,150 350,200 
C350,200 400,250 440,200 
M360, 300 

C360,300 400,250 450,300 
C450,300 500,350 540,300"/> 


C260,200 300,150 350,200 
C350,200 400,250 440,200 
M360, 300 

C360,300 400,250 450,300 
C450,300 500,350 540,300"/> 


</aets> 
</defs> < n d —size="25" font-femily" 宋 体 "> 
<q fill="4F39" font-size="25" ronr-family"iEfb=> 二 

</svg> J 

</head> Sin. 


[ 03 PP] 在 </defs> 标签 下 方 添加 <g> 标签 ， 并 为 其 添加 字符 颜色 、 字 符 大 小 和 字体 等 属性 。 
在 <g> 标签 中 添加 <text> 元 素 ， 并 添加 坐标 属性 。 


ET xmlns= "http://www. w3 .crg/2000/svg"> 
ttp: //wwa.v3.org/2000/svg*> <dets> 
<patn 1d="circlepath" 
td="circlepath" derya: 
60,200 = 


0 300,150 350,200 
200 409,250 440,200 


€260,200 300,150 350,200 s 


€350,200 400,250 440,200 M360,300 
M360,300 C360,300 400,250 450,300 
C360,300 400,250 450, 300 C450,300 500,350 540,300"/> 
€450,300 500,350 540, 300"/> </assay 

</defs> 


sizes" z 


z emlly" 宗 体 "> 
1y" 末 人 "> 


ao: 
t#circlepath"> 
T 


</texzpath> 


/rexry 
k </g> 
</a> duse xlinrihze 


</svg> /sv 


[04 Pp] 在 text 元 素 中 添加 <textpath> 标签 ， 并 为 该 标签 中 添加 属性 以 及 文字 内 容 。 使 用 相 
同 的 方法 输入 其 他 的 代码 。 


Bera T s | 


wan ame osom EC 


mam =m 
BERMO [ai Pomat Gne mana a a) A 


CT aeann - Cama 
Bawa wa em sans 


[ 05 多] 按 快捷 键 Ctrl+S， 将 文档 保存 为 “ 源 文件 \ 第 6 章 \6-4-1.html”， 按 F12 键 测试 页 
面 中 的 路 径 文本 效果 。 


?4 
部 


提问 : defs 元 素 有 什么 作用 ? 
B: defs 元 素 是 一 个 不 进行 任何 图 形 绘制 的 元 素 ，defs 元 素 与 HTML 
中 的 head 元 素 类 似 。 


6.5 SVG 渐变 效果 | 
SVG 中 并 非 只 能 使 用 纯色 进行 填充 ， 用 户 还 可 以 实现 颜色 渐变 效果 。 通 过 linearGradient 


元 素 和 radialGradient 元 素 可 以 定义 渐变 的 绘图 方法 ， 只 需要 将 图 形 的 fill 属性 指定 为 对 应 的 
id 即 可 。 


© HTv 5 > 网 页 制作 > 全程 揭秘 — 


线性 渐变 是 一 种 沿 着 一 根 轴线 进行 多 种 颜色 间 的 逐渐 混合 ， 也 就 是 说 颜色 将 会 从 起 点 
到 终点 颜色 进行 顺序 渐变 。 


m E| 91+ 视频 : 制作 横向 与 纵向 线性 渐变 效果 


rL Ea A html A 操作 视频 : 视频 \ 第 6 章 \6-5-1. swf 


<!doctype html> 


<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 
width="800" height="500" 
xmlrns="http://www.w3.org/2000/svg"> 
</svg> 
</head> 


<body> 
</body> 


[01 PHT X> 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 </head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


H <: doctype ntml> <html> 
-=m> <head> 
<head> <meta charset="utf-8"> 
D <meta charset="utf-8"> <title> 无 标题 文档 c/title> 
<title> 无 标题 文档 </title> <svg version="1.1" 
sv version="1.1" width="800" height="500" 
width="800" height="500° xalas="http://www.w3.org/2000/svg"> 
xmlna="http://www.w3.org/2000/svg"> <dets> 
<defs> <linearGradient id="colorGradient"> 
</dets> <stop offset="0%" stop-color="$F0F"/> 
' </=vc> <stop offset="1004" stop-color="#00F"/> 
. </head> </linearGradient> 
</dets> 


EE <boay> </svg> 


(02 在 xmlns 属性 的 下 方 输入 <defs> 标签 。 在 该 标签 中 添加 <linearGradient> 标签 和 
<stop> 标签 ， 并 添加 相应 的 属性 。 


dof 标签 的 下 方 输入 <iect> 标签， 定义 渐变 的 形状 与 大小. 执行 “文件 > 保存 " 命令 ， 
将 文档 保存 为 “ 源 文件 \ 第 6 章 \6-5-1html”， 按 F12 键 测 试 页 面 中 的 线性 渐变 效果 。 
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< 提问 :《linearGradient> 标签 通常 放置 在 哪个 位 置 ? 
答 : <linearGradient> 标签 必须 嵌 套 在 <defs> 的 内 部 。<defs> 标签 是 
definitions 的 缩写 ， 它 可 对 诸如 渐变 之 类 的 特殊 元 素 进行 定义 。 


径 向 渐变 
径 向 渐变 是 从 起 点 到 终点 进行 多 种 颜色 间 的 逐渐 混合 的 渐变 效果 ， 并 且 径 向 渐变 是 由 
内 向 外 进行 圆 形 效果 的 渐变 。 


m 实例 92+ 视频 : 制作 径 向 渐变 效果 


tuan ` 
EE 9 # I aaam 


A 操作 视频 : 视频 \ 第 6 章 \6-5-2 swf 

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 

Width="800" height="S00" 

xmlns="http://www.w3.org/2000/svg"> 
</svg> 
</head> 


<body> 
</body> 


[07] 执 行 “ 文 件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档。 在 head> 标签 上 方 输 
入 <sve> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


i <!doctype btnl> 
a = 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 
width="800" height="500" 
xmlna="http://www.w3.org/2000/svg"> 


1e 


caer-eutE_e 
标题 文档 </=i 


cp-epacieirele/> 
=top-opacity-"0.2"/> 


<dets> 
<radialGradient id="colorGradient"> 
</radialGradient> 
</defs> <ear> 
/boay> 
</svg> <> 


在 <radialGradient> 标签 内 添加 <stop> 标签 ， 定 义 渐变 的 颜色 。 
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OPRI <rect> 标签 ， 设 置 渐变 的 形状 ， 并 将 填充 颜色 设置 为 上 面 所 设置 的 渐变 效果 。 
将 文档 保存 为 “ 源 文件 \ 第 6 章 6-5-2.html”, jë F12 键 测试 页 面 中 的 径 向 渐变 效果 。 


2 e° 提问 : radialGradient 元 素 有 哪些 属性 ? 
2 答 ; <radialGradient> 标签 的 id 属性 可 为 渐变 定义 一 个 唯一 的 名 称 ， 每 
种 颜色 通过 一 个 <stop> 标签 来 规定 ，offset 属性 用 来 定义 渐变 的 开始 和 结束 
位 置 。 


6.6 样式 单 


SVG 与 HTML 一 样 ， 也 可 以 通过 样式 单 来 修饰 外 观 。 样 式 单 与 textPath 的 定义 一 样 ， 可 
以 放 在 defs 元 素 中 。 


BD 实例 93+ 视频 : 使 用 样式 控制 绘制 元 素 的 外 观 


sra s E 
货源 文件 : 源 文件 \ 第 6 章 \6-6.html D 操作 视频 : 视频 \ 第 6 章 \6-6. swf 
5 sab dh > == <!doctype html> 
<html> 


<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </titie> 
<svg version="1.1" 
width="800" height="500" 
xmlns="http://www.w3.org/2000/svg"> 
</svg> 
</head> 


uk ome <body> 
</body> 


[ 91 六 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <head> 标签 上 方 输 
入 <svg> 标签 对 ， 并 添加 版 本 信息 以 及 SVG 的 画布 大 小 属性 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<svg version="1.1" 
widrh="800" heighħt="500" 
xmlns="http://www.w3.org/2000/svg"> 
<defs> 
<style type="text/css"> 
</style> 
</defs> 
</svg> 


[到 站 输入 <defs> 标签 ， 并 在 其 中 添加 <style> 标签 ， 用 于 定义 样式 。 在 <style> 标签 中 定 
义 三 个 类 样式 ， 并 为 每 个 样式 添加 样式 参数 。 


[ 03 PJ </style> 标签 下 方 输入 <rect> 标签 ， 
定义 的 样式 添加 到 绘制 的 正方 形 上 。 


ET wawas 


[ 芭 及 接 快捷 键 CitSs， 将 文档 保存 为 “ 源 文件 \ 第 6 章 \6.6html”， 按 Fl2 键 测试 定义 
样式 后 的 形状 效果 。 
O 
24 提问 : SVG 有 哪些 样式 ? 
2: 用 户 可 以 使 用 CSS 选择 器 和 语法 来 修改 SVG 绘图 的 外 观 ， 既 可 以 
JERR CSS 样式 ， 也 可 以 作为 外 部 样式 表 来 引用 。 


6.7 本 章 小 结 


本 章 主要 向 用 户 介绍 了 SVG 的 效果 和 SVG 的 使 用 方法 。 使 用 这 种 可 缩放 式 的 SVG 
形 既 提高 了 图 像 文件 的 可 读 性 ， 又 便于 图 像 后 续 的 修改 和 编辑 。 同 时 SVG 图 像 与 一 些 现 有 的 
技术 可 以 互相 兼容 ， 例 如 CSS 和 JavaScript 等 技术 都 可 以 与 SVG 融合 使 用 。 


掌握 音频 和 视频 的 概要 


掌握 音频 和 视频 的 属性 


掌握 音频 和 视频 的 方法 


了 解 事件 的 处 理 方式 


熟练 掌握 多 媒体 事件 


FEA 


第 7 章 音频 和 视频 


在 HIML 5 中 ， 可 以 通过 audio 元 素 和 video 元 素 轻 
松 处 理 音 频 和 视频 ， 本 章 将 对 HTML 5 处 理 音 频 和 视频 的 
方法 和 技巧 进行 详细 的 讲解 。 


7.1 <audio> 和 <video> 的 概要 


在 HTML 5 问世 之 前 ， 如 果 需 要 在 网 络 上 展示 音频 、 
视频 和 动画 ， 可 以 使 用 第 三 方 开发 的 播放 器 或 者 Flash, 
但 它们 都 需要 在 浏览 器 中 安装 各 种 插件 ， 而 且 播 放 速 度 也 
很 慢 。 

在 HTML 5 中 提供 了 音频 和 视频 的 标准 接口 ， 播 放 
音频 、 视 频 和 动画 就 不 需要 安装 插件 了 ， 只 需要 一 个 支持 
HTML 5 的 浏览 器 即 可 。 

HTML 5 中 新 增 了 <audio> 和 <video> 两 个 专业 元 素 ， 
其 中 <audio> 元 素 专 门 用 来 播放 网 络 上 的 音频 数据 ， 而 
video> 元 素 用 来 播放 网 络 上 的 视频 和 电影 。 

@ <audio> 的 基本 格式 

如 果 需 要 在 HTML 5 中 显示 音频 数据 ， 只 需 在 
audio> 标 签 中 指定 音频 的 URL 地 址 即 可 , 基本 格式 如 下 : 

<body> 

<audio src="sample.mp3"></audio> 

</body> 
@ <video> 的 基本 格式 

如 果 需 要 在 HTML 5 中 显示 视频 数据 ， 只 需 在 
<video> 标签 中 指定 视频 的 长 、 宽 等 属性 ， 并 指定 视频 的 
URL 地 址 ， 基 本 格式 如 下 : 

<body> 

<embed src="move.flv" width="32" height="32"> 

</embed> 

</body> 


用 户 还 可 以 通过 <source> 元 素 为 同一 个 多 媒体 数据 
指定 多 个 播放 格式 和 编码 方式 ， 以 确保 浏览 器 可 以 从 中 选 
择 一 种 可 以 支持 的 播放 格式 进行 播放 ， 基 本 格式 如 下 : 

<video src="move.flv" width="32" height="32"> 

<source src="move.move" type="video/quicktime"> 


<source src="move.ogv" type="video/ogg"> 
</video> 


| 7.2 <audio> 和 <video> 的 属性 | 


<audio> 元 素 和 <video> 元 素 具 有 的 属性 基本 相同 ， 包 括 src、 autoplay. preload 和 
loop 等 属性 。 


@ src 
在 src 属性 中 可 以 指定 媒体 数据 的 URL 地 址 。 


<video src="move.flv"></video> 


@ autoplay 
在 autoplay 属性 中 可 以 指定 媒体 数据 是 否 在 页 面 加 载 后 自动 播放 ， 其 基本 语法 如 下 : 


<video src="move.flv" autoplay></video> 
@ preload 
在 preload 属性 中 可 以 指定 媒体 数据 是 否 预 加 载 ， 其 基本 语法 如 下 : 
<video src="move.flv" preload="auto"></video> 


该 属性 有 3 个 属性 值 ， 分 别 是 none、metadata 和 auto， 默 认 值 为 auto, 
@ none 表 示 不 进行 预 加 载 。 


© metadata 表 示 只 预 加 载 媒体 的 元 数据 (媒体 字 节 数 、 第 一 帧 、 播 放 列表 和 持续 时 间 等 ) 。 
@ auto 表 示 预 加 载 全 部 视频 或 音频 。 


@ loop 
在 loop 属性 中 可 以 指定 是 否 循环 播放 视频 或 音频 ， 其 基本 语法 如 下 : 


<video src="move.flv" preload="auto" loop></video> 


Ə controls 


在 controls 属性 中 可 以 指定 是 否 为 视频 或 音频 添加 浏览 器 自 带 播放 用 的 控制 条 ， 控 制 
条 中 包括 播放 、 暂 停 等 按钮 ， 其 基本 语法 如 下 : 


<video src="move.flv" loop controls></video> 


如 果 使 用 preload 属性 进行 预 加 载 ， 浏 览 器 就 会 将 视频 或 音频 数据 进行 
缓冲 ， 从 而 加 快 播放 的 速度 。 


S 实例 94+ 视频 ; 导入 视频 | 


f 源 文件 : 源 文件 \ 第 7 章 \7-2-1.html A 操作 视频 : 视频 \ 第 7 章 \7-2-1. swf 


© ut 5 > 网 页 制作 > 全 程 揭秘 


eS <!doctype html> 
- praan 
— Ag <html> 

a <head> 


<meta charset="utf-8"> 
<zitle> 导 入 视 网 </zicle> 
</head> 


<body> 
</body> 
</html> 


Dreamweaver 中 新 建 一 个 HTML 5 空白 文档 ， 在 <title> 标签 中 输入 文档 标题 。 


<title> 导 入 视频 </title> 
</head> 


<body> 
video src="move.flv"></video> 


</body> 
</html> 


(02 >Æ <body> 标签 中 输入 <video src="move.flv"></video> 代码 ， 按 快捷 键 Ctrlt+S， 将 
其 保存 为 “ 源 文件 \ 第 7 章 \7-2-1.html”， 按 F12 键 在 浏览 器 中 查看 页 面 效 果 。 


提问 : video 支持 的 视频 格式 有 哪些 ? 
答 : HTML 5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 ，video 
支持 的 视频 格式 有 Ogg、MPEG4 和 WebM 3 种 格式 。 


f 源 文件 : 源 文件 \ 第 7 章 \7-2-2.html A 操作 视频 : 视频 \ 第 7 章 \7-2-2 swf 


WRTA <video> 添加 autoplay 属性 ， 打 开 页 面 以 后 ， 视 频 将 处 于 第 
1 帧 位 置 ， 不 进行 播放 。 
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编辑 (E) SEV) 插入 (1) 修改 (M) 
SEN)... Ctrl+N 
新 建 流体 网 格 布 局 (PP)..… = 
Ea 
Ctrl+Shift+O % = . 
Cilsw PET sssi Sa 
Ctrl+Shift+W (GAE x RAAE 


OPRI “E> E AG, ERA GTA ERER RH S 7 E201. 
html”， 单 击 “ 打 开 ” 按钮 ， 打 开 素材 。 


<!doctype html> l... 
pmd * se» p -||š PRA z 
<head> - 


<meta charset="utf-8"> 
<title> 导 入 视频 </titie> 


</head> 
<body> 
<video src="move. f1v" [autopiayþ</video] 
</body> 
</html> 


le-a: mime 


[02] 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 在 <video> 标签 中 添加 autopaly 属性 ， 按 
快捷 键 Ctrl+ShiftHS， 将 其 另存 为 “ 源 文 件 \ 第 7 章 7-2-2 html”, f F12 键 在 浏览 器 中 查 
看 页 面 效果 。 


提问 : autoplay 属性 的 定义 和 用 法 有 了 哪些 ? 
答 : autoplay 属性 的 定义 是 如 果 视 频 准 备 就 绪 ， 就 马上 开始 播放 ， 用 法 
是 在 <video> 标签 中 设置 autoplay 属性 ， 视 频 将 自动 播放 。 


mb 实例 96+ 视频 : 添加 video 播放 条 | 


f 源 文件 : 源 文件 \ 第 7 章 \7-2-3.html A 操作 视频 : 视频 \ 第 7 章 \7-2-3. swf 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 


SSE EEV) 插入 (1 修改 (M) 
FEN)... Ctrl+N 
新 建 流体 网 格 布 局 (月 .… 
仁 Bridge A (B)... Ctrl+Alt+O 
打开 最 近 的 文件 (T) , 
在 框架 中 打开 (月 .… Ctrl+Shift+O 
关闭 (QO Ctrl+W 一 
全 部 关闭 (E) Ctrl+Shift+W (sss) o [ER J 


[91 P] 执 行 “文件 > 打开” 命令， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 7 章 \72101. 
html”， 单 击 “打开 ” 按 钮 ， 打 开 素 材 。 


<!doctype html> 

<html> aama 

<head> a —— Paay 
<meta charset="utf-8"> pme 

<title> 导 入 视频 </title> 

</head> SIRA, 


` 
<body> Tumi bas 
<video src="move, fiv" esse y [ponezors}k/vsae0> S 
2 ugs 

; 


</html> 


m. ma m+ 


[ 02 | 单 击 “代码 ”按钮 ， 打 开 代码 视图 窗口 ， 在 <video> 标签 中 添加 controls 属性 ， 按 快 
捷 键 Ctrl+ShifttS， 将 其 另存 为 “ 源 文 件 \ 第 7 章 \7-2-3.html”， 按 Fl12 键 在 浏览 器 中 查看 
页 面 效 果 。 


人 
A 提问 : 浏览 器 控件 包括 什么 ? 
答 : 浏览 器 控件 应 该 包括 播放 、 暂 停 、 定位、 音量 、 全 屏 切 换 、 字 幕 (如 
RTA) 和 音 轨 (如 果 可 用 ) 。 


poster (video 元 素 独 有 属性 ) 
当 视 频 不 可 用 时 ， 可 以 使 用 poster 属性 向 用 户 展示 一 幅 替 代 图 片 ， 以 免 展 示 视 频 的 区 
域 中 出 现 一 片 空白 ， 其 基本 语法 如 下 : 
<video src="move.flv" poster="pic.jpg"></video> 
width (video 元 素 独 有 属性 ) 
在 width 属性 中 可 以 指定 视频 的 宽度 (以 像素 为 单位 ) 。 
height (video 元 素 独 有 属性 ) 
在 height 属性 中 可 以 指定 视频 的 高 度 (以 像素 为 单位 ) ， 其 基本 语法 如 下 : 


<Video src="move.flv" width="120" height="50"></video> 
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mb 实例 97+ 视频 : 使 用 poster 替换 video | 


LS, 


f 源 文件 : 源 文件 \ 第 7 章 \7-2-4.html A 操作 视频 : 视频 \ 第 7 章 \7-2-4. swf 


E s40 EEV EAD 修改 (M) 
新 建 (N)… Ctrl+N 


在 框架 中 打开 (PR.… Ctrli+Shift+O = 
关闭 (QO Ctri+W = = = 
全 部 关闭 (E) Ctrl+Shift+W 


[91 Pj 执行 “文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 7 章 \72101htnl”， 
单 击 “ 打 开 ” 按 钮 ， 打 开 素材 。 


[slovloled ` 


[ 02 pi “RE” HH, 打开 代码 视图 窗口 ， 在 <video> 标签 中 输入 poster 属性 。 


== E GK. w == — 


2 键 在 浏 
览 器 中 查看 页 面 效果 。 


WojEHrur 5 > 网 页 制作 > 全 程 揭秘 


提问 : 使 用 poster 属性 有 何 作用 ? 
答 : 使 用 poster 属性 可 以 避免 视频 在 浏览 器 中 出 现 问题 时 在 页 面 中 显示 
为 空白 。 


7.3 <audio> 和 <video> 的 方法 | 


在 HTML 5 rB, <audio> ZRF <video> 元 素 都 属于 媒体 处 理 范畴 ， 是 都 可 以 使 用 导入 、 
播放 、 暂 停 来 检查 是 否 可 以 播放 的 方法 。 


使 用 play 方法 可 以 播放 媒体 ， 自 动 将 元 素 的 paused 属性 的 值 变 为 false， 其 基本 语法 
如 下 : 
var audio=document .creatElement ("audio"); 


audio.src="audio/source.mp3";// 路 径 
audio.play(); 


(ED SE 98+ 视频 : 控制 播放 audio | 


f 源 文 件 : 源 文件 \ 第 7 章 \7-3-1.html A 操作 视频 : 视频 \ 第 7 章 \7-3-1. swf 


[EIB] s86 5V ÆAND EAM 


新 建 (N)… Ctrl+N 


E Bridge 中 浏览 (B).… CtritAlt+O 
打开 最 近 的 文件 (D) , 
在 框架 中 打开 (有 Ctrl+Shift+O 
关闭 (QO Ctrl+W 


01 执行 “文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 7 章 \73101 htnl”， 
Bh FIF 按钮， 打开 素材 。 


第 7 章 音频 和 视频 WA 


<body> 
<audio id="audiol"> 

<source src="73103.wav" > 

Your browser does not support ETMLS audio. 


[02 >] 单 击 选项 栏 中 的 “代码 ”按钮 ， 将 界面 切换 到 代码 视图 中 ， 在 <body> 标签 中 输入 
<div id="b1"><button onclick="playVid()" type="button"> 播放 音频 </button></div> 代码 。 


<div id="pic"> /div> 
<div id="b1"><button onclick="playVid()" cype=| script> 
wputton"> 播 放 瘟 频 < /bucon></div> ar myVideo=document .getElementById ("audio1i"); 


</div> 
Kscript> 


unction playVid() 
t 


getElementB: myVideo.play(); 


} 


kK/boay> 
/html> 


[ 03 Pp 输入 <script> 标签 ， 在 标签 中 输入 document.getElementById 方法 用 来 访问 HTML 5 
中 的 audio1， 继 续 定 义 play() 方法 。 


CD 
=) 

nr 人 < f 

La: va wapna | 4 


[L04 多 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


? é 


“$ — Ei: 如 何 访问 HTML 中 的 元 素 ? 
答 : 可 以 使 用 document.getElementById 方法 从 JavaScript 访问 某 个 
HTML 元 素 ， 但 需要 使 用 id 属性 来 标识 HTML 元 素 。 


7.3.2 
使 用 pause 方法 可 以 暂停 播放 ， 自 动 将 元 素 的 paused 属性 的 值 变 为 true。 


function aPause() ( 
audio.pause () ; 


© Tt 5 > 网 页 制作 > 全 程 揭秘 J 


m 实例 99+ 视频 : 


及 置 暂 停 audio 


f 源 文件 : 源 文件 \ 第 7 章 \7-3-2.html 


A 操作 视频 : 视频 \ 第 7 章 \7-3-2 swf 


EAB s49 ZEV EAD 修改 (M) — 
Sma Ctrl+N | S 
本 网 = 
Fo š 
Æ Bridge EEM Ctr|+Alt+O a 
打开 最 近 的 文件 (T) , = 
在 框架 中 打开 ().. Ctrl+Shift+O na s 
关闭 (QO Ctl+W mao Gamassuamasssssisiaa2 J= 
全 部 关闭 (6) Ctrl+Shift+W SANER) evano [INNER 


[91 Pj 执行 “文件 > 打开” 命令， 在 弹出 的 “打开 ” 对 话 框 中 选择 “素材 \ 第 7 章 3201. 
html”， 单 击 “ 打 开 ” 按 钮 ， 打 开 素 材 。 


kscript> 
var my/ideo=docunent.getElementById("audic1"); 


fonction playvid() 


myvideo.play(); 
} 


</script> 


[到 站 单 击 “代码 ”按钮 ， 打 开 代码 视图 
方法 控制 audio1。 


03 P| 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 
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@ 
Ay 提问 : <button> 标签 有 何 作 用 ? 
答 : <button> 标签 用 来 定义 按钮 ， 在 button 元 素 内 可 以 放置 内 容 ， 例 
如 文本 或 图 像 等 。 


Æ load 方法 


使 用 load 方法 可 以 重新 载 入 媒体 进行 播放 ， 自 动 将 元 素 的 playbackRate 属性 值 变 为 
defaultPlaybackRate 属性 的 值 ， 自 动 将 元 素 的 error 的 值 变 为 null。 


audio.load() 


(¿£V canPlayType 方法 


使 用 canPlayType 方法 可 以 测试 浏览 器 是 否 支持 指定 的 媒体 类 型 ， 其 基本 语法 如 下 : 


var support=videoElement .canPalyType (type) 


| 7.4 <audio> 和 <video> 的 事件 | 


audio 和 video 定义 的 属性 在 浏览 器 中 请 求 媒体 数据 、 下 载 媒体 数据 、 播 放 媒体 数据 和 
结束 播放 数据 一 系列 过 程 中 会 触发 各 种 事件 ， 事 件 及 描述 如 下 : 


事 件 描 述 
loadstart 浏览 器 开始 在 网 页 上 寻找 媒体 数据 
progress 浏览 器 正在 获取 媒体 数据 
suspend 浏览 器 暂停 获取 媒体 数据 ， 但 还 在 进行 下 载 
浏览 器 在 没有 下 载 完 全 部 媒体 数据 前 中 止 获取 媒体 
abort 
数据 
error 浏览 器 获取 媒体 数据 的 过 程 中 出 现 错误 
audio 元 素 和 video 元 素 所 在 网 络 突然 变 为 未 初始 化 
emptied 
状态 
stalled 浏览 器 尝试 获取 媒体 数据 失败 
paly 当 执 行 paly 方法 时 触发 ， 浏 览 器 开始 播放 媒体 数据 
pause 当 执 行 pause 方法 时 触发 ， 浏 览 器 暂停 播放 媒体 数据 
loadedmetadata 浏览 器 获取 媒体 数据 的 时 间 长 和 字 节 数 
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( 续 表 ) 
事 件 描 述 
nik 浏览 器 已 经 加 载 完毕 当前 播放 位 置 的 媒体 数据 ， 准备 
播放 
waiting 在 播放 过 程 中 由 于 下 一 帧 尚未 加 载 完毕 而 暂停 播放 
playing 正在 播放 媒体 数据 
canplay 浏览 器 可 以 播放 媒体 数据 ， 但 播放 期 间 需 要 缓冲 
浏览 器 可 以 播放 媒体 数据 ， 以 当前 播放 速率 可 以 将 媒 
kaki 体 数据 播放 完毕 ， 不 再 需要 进行 缓冲 
seeking seeking 属性 为 tue， 浏 览 器 即 正在 请 求 数据 
seeked seeking 属性 为 false， 浏 览 器 停止 请 求 数据 
timeupdate 当前 播放 位 置 被 改变 
ended 播放 结束 后 停止 播放 


defaultpalybackRate 属 性 (默认 播放 速率 ) 或 palybackRate ( 当 
前 播放 速率 ) 属性 被 改变 

播放 时 长 被 改变 

volume 属性 (音量 ) 被 改变 或 muted 属性 (静音 状态 ) 被 
改变 


ratechange 


durationchange 


volumechange 


@ 导致 网 络 变 为 未 初始 化 状态 的 两 个 可 能 原因 ， 分 别 是 载 入 媒体 过 程 中 
突然 发 生 一 个 致命 错误 和 在 浏览 器 正在 选择 支持 的 播放 格式 时 ， 又 调用 了 
load 方法 重新 载 入 媒体 。 

在 利用 audio 元 素 或 video 元 素 读 取 或 播放 媒体 数据 触发 一 系列 事件 时 ， 可 以 使 用 

JavaScript 脚本 来 捕捉 事件 ， 从 而 对 事件 进行 处 理 。 

@ 捕捉 事件 
使 用 video 元 素 或 audio 元 素 的 addEventListener 方法 可 以 对 事件 的 发 生 进行 监听 ， 基 
本 语法 如 下 : 


VideoElement .addEventListener (type,listener,useCapture) ; 


@ videoElement 表示 页 面 中 的 video TÆR audio 元素 ，type 表示 事件 
BER, listener 表示 绑 定 的 函数 ，useCapture 表示 布尔 值 ， 表 示 该 事件 的 
响应 顺序 。 

@ 事件 处 理 


使 用 JavaScript 脚本 中 常见 的 获取 事件 句柄 的 方式 处 理事 件 ， 基 本 语法 如 下 : 


<video id="videol" src="sample.mov" onplay="begin playing();"></video> 
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function begin playing() 
t 


i 


mb 实例 100+ 视频 : 设置 监听 audio 


sm 


f 源 文件 : 源 文件 \ 第 7 章 \7-4-1.html 


[EGB 249 坦 看 (V。 EAM 修改 (M) 


新 建 (N)… Ctrl+N 


在 框架 中 打开 (PP).… Ctrl+Shift+O 
关闭 (QO Ctrl+W 
全 部 关闭 (E) Ctrl+Shift+W 


[ol P] 执 行 “文件 > 打开 ”命令 ， 在 弹出 的 “打开 ”对 话 框 中 选择 “素材 \ 第 7 章 \74101. 
html”， 单 击 “ 打 开 ” 按 钮 ， 打 开 素材 。 


[02 FP] 单 击 “ 代 码 ”按钮 打开 代 码 视 图 窗口 ， 输 入 audio.addEventListener("canplaythrou 
gh", function () {alert(' 音频 文件 已 经 准备 好 ， 随 时 待命 ):}, false); 事件 来 监听 音频 。 


是 如 果 需 要 在 HTML 文档 中 插入 JavaScr ipt， 必 须 使 用 <scr ipt></sor ipt> 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


" 
š 


1O šP shi YN ly 


E 
i 


[本 站 执行 “文件 > 另存 为 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 " 
按钮 ， 按 F12 键 在 浏览 器 中 预览 该 页 面 。 


2L 
< 提问 : canplaythrough 事件 有 何 作 用 ? 
答 : 使 用 canplaythrough 事件 监听 音频 可 以 了 解 音频 加 载 的 进度 ， 以 及 
是 否 准 备 播 放 。 


7.5 本 章 小 结 


本 章 主要 讲解 了 HTML 5 中 新 增 的 audio 元 素 和 video 元 素 所 具有 的 属性 、 方法 和 事件 。 
通过 本 章 的 学 习 ， 读 者 可 以 熟练 掌握 如 何在 HTML 5 文档 中 完成 音频 和 视频 的 添加 ， 以 及 
如 何 控制 音频 和 视频 。 
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和 其 他 多 媒体 元 素 


使 用 video 元 素 和 audio 元 素 可 以 在 网 页 内 播放 视频 
和 音频 ， 还 可 以 使 用 img 元 素 将 图 片 链 入 网 页 中 ， 这 些 都 
是 最 常用 的 多 媒体 功能 。 

除 此 之 外 ， 还 可 以 使 用 iframe 元 素 将 另 一 个 网 页 链 
入 到 当前 网 页 中 ， 并 且 使 用 object 元 素 和 embed 元 素 将 
更 多 类 型 的 多 媒体 对 象 链 入 当前 网 页 ， 不 仅 是 图 片 、 视 频 
和 音频 。 例如 Flash 影片 (SWF) 和 Shockwave 影片 (DIR) 、 
QuickTime, AVI, applet, ActiveX 控件 以 及 各 种 格式 的 
音频 文件 。 在 HTML 网 页 中 , 这 些 多 媒体 文件 统称 为 对 象 ， 
本 章 将 对 其 进行 详细 的 讲解 。 


| 8.1 内 联 框 架 (iframe 元 素 ) 


使 用 HTML 中 的 内 联 框 架 可 以 在 多 个 视图 窗口 中 展 
示 网 页 ， 视 图 可 以 是 独立 窗口 或 子 窗口 。 多 视图 模式 可 以 
实现 保持 某 一 个 视图 始终 可 视 ， 而 其 他 视图 可 以 滚动 或 者 
被 替换 。 
内 联 框架 即 iframe 元 素 ， 是 浏览 器 窗口 中 的 一 个 
域 或 者 一 个 容器 ， 可 以 用 于 在 一 个 页 面 中 插入 和 显示 另 一 
个 页 面 。 


K 


内 联 框架 不 是 一 个 HTML 文件 ， 而 是 存放 
一 个 单独 HTML 文件 的 容器 。 


8.2 iframe 元 素 的 属性 
在 HTML 5 中 使 用 iframe 元 素 ， 可 以 通过 对 多 个 
性 进行 设置 完成 框架 的 构建 。 
8.2.1 
使 用 iframe 元 素 的 src 属性 可 以 定义 框架 所 指向 的 文 
档 资源 ， 用 于 引用 URL 地 址 ， 其 基本 格式 如 下 : 


<iframe src="URL"></iframe> 


H 


了 解 内 联 框架 


掌握 内 联 框架 的 属性 


掌握 object 元 素 


了 解 沙 盒 安全 限制 


掌握 embed 元 素 
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src 属性 定义 的 内 容 是 框架 窗口 的 初始 内 容 ， 可 以 是 一 个 HTML 文档 ， 
也 可 以 是 一 张 图 片 。 


PA width 和 height 属性 
使 用 iframe 元 素 的 width 属性 和 height 属性 可 以 指定 框架 的 宽度 和 高 度 ， 其 基本 格式 
WT: 


<iframe src="URL" width="420" height="330"></iframe> 


mb 实例 101+ 视频 : 创建 内 联 框架 | 


f 源 文件 : 源 文件 \ 第 8 章 \8-2-2. html A 操作 视频 : 视频 \ 第 8 章 \8-2-2. swf 


<head> 
<meta charset="utf-8"> 


= 
n title> 内 联 框 架 </title> 

引 </head> 

` *| 

; n 

n 加 <body> 

= ype eos </body> 


[01 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 HTML 5 的 空白 文档 。 在 <title> 标签 中 单 击 并 输 
入 文档 标题 。 


<head> 
<meta charset="utf-8"> 
<title> 内 联 框架 </title> 
</head> 


<body> 


iframe src="82201.jpg"></iframe>] 
</body> 


</html> 
[ 02 P| 在 <body> 标 签 中 输入 <iframe src="82201.jpg"></iframe> 代码 定义 框架 的 URL 地 址 ， 
输入 相应 的 代码 设置 框架 的 宽度 和 高 度 。 
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E33 = 
mmu. ¿me 


[05 只 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 8 章 \8-2-2.html”， 按 Fl2 键 
在 浏览 器 中 查看 页 面 效果 。 


提问 : 使 用 内 联 框架 有 何 优势 ? 
答 : 使 用 内 联 框架 可 以 将 一 个 页 面 的 “标志 和 标题 ”、“ 导 航 条 ”和 “ 主 
要 信息 ”等 分 开 为 独立 的 HTML 页 面 ， 使 得 浏览 器 无 须 重复 加 载 。 


PÆ frameborder 属性 


使 用 iframe 元 素 的 frameborder 属性 可 以 设置 页 面 区 域 边框 的 宽度 ， 取 值 范围 为 0~1, 
0 表示 不 显示 边框 ，1 表示 在 每 个 页 面 之 间 均 显示 边框 ， 其 基本 格式 如 下 : 


<iframe frameborder="x"></iframe> 


% 一 般 情 况 下 ， 为 了 使 得 内 联 框架 与 邻近 的 内 容 相 融 合 ， 经 常 将 
frameborder 属性 值 设置 为 0。 


| 8.24 | marginwidth 和 marginwidht 属性 

marginwidth 属性 和 marginwidht 属性 用 来 指定 显示 内 容 与 窗口 边界 之 间 的 空白 距离 大 
小 ， 其 中 marginwidth 属性 用 来 确定 显示 内 容 与 左右 边界 之 间 的 距离 ，maginwidht 用 来 确 
定 显示 内 容 与 上 下 边界 之 间 的 距离 ， 基 本 格式 如 下 : 


<iframe marginwidth="2" marginheight="0" ></iframe> 


% marginwidth 属性 和 marginwidht 属性 的 参数 值 都 是 数字 ， 分 别 表示 左 
右上 下 边 距 所 占 的 像素 点 数 。 


8.2.5 


在 HIML 5 中 可 以 为 每 个 框架 定义 一 个 name 属性 指定 一 个 名 称 作为 框架 的 标识 ， 用 
于 其 他 框架 文档 通过 name 属性 和 target 属性 将 其 作为 目标 指向 ， 其 基本 格式 如 下 : 
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<iframe name="fram01"></iframe> 
# HTML 5 中 ， 可 以 通过 超 链接 的 target 属性 为 框架 页 面 建立 超 链接 ，target 属性 不 仅 
可 以 用 来 建立 链接 ， 还 可 以 建立 图 像 映射 以 及 表单 等 ， 其 属性 值 和 说 明 如 下 : 


属性 值 说 明 


_blank 在 一 个 新 的 、 未 命名 的 浏览 器 窗口 中 打开 链接 的 页 面 
如 果 是 嵌 套 的 框架 ， 链 接 会 在 父 框 或 窗口 中 打开 ; MIRA EE 


_parent y = 
套 的 框架 ， 则 等 同 于 _top， 链 接 会 在 整个 浏览 器 窗口 中 显示 

_selt 在 当前 页 面 所 在 窗口 或 框架 中 打开 链接 的 页 面 

_top 在 完整 的 浏览 器 窗口 中 打开 链接 的 页 面 


AGB align 属性 
使 用 iframe 元 素 的 align 属性 可 以 用 来 设置 框架 的 垂直 方向 和 水 平方 向 的 对 齐 方式 ， 
其 基本 格式 如 下 : 


<iframe align="top" ></iframe> 


827 
当 src 指定 的 HTML 文件 在 指定 的 区 域 中 不 能 完全 显示 的 时 候 ， 可 以 使 用 iframe 元素 
的 scrolling 属性 定义 是 否 显示 滚动 条 ， 一 共有 3 个 属性 值 ， 分 别 如 下 : 
@ yes: 显示 滚动 条 。 
@ no: 不 显示 滚动 条 。 
@ auto: 当 需 要 时 才 显 示 滚动 条 。 


(8.3 沙 盒 安全 限制 | 


由 于 iframe 元 素 的 安全 问题 备 受 争 议 ，HTML 5 为 iframe 元 素 新 增 了 sandbox 属性 ， 
sandbox 属性 可 以 实现 沙 盒 安 全 限制 ， 即 通过 限制 被 签 入 内 容 所 允许 的 操作 而 提升 iframe 
的 安全 性 。 

sandbox 属性 有 以 下 几 个 属性 值 : 

@ allow-same-origin 

allow-same-origin 表示 人 允许 将 iframe 中 的 内 容 当做 是 与 父 页 面 同 源 ， 可 以 访问 父 页 面 

中 的 内 容 。 


@ allow-top-navigation 
allow-top-navigation 表示 人 允许 iframe 中 的 内 容 导 航 父 页 面 中 的 内 容 。 
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@ allow-forms 


allow-forms 表示 人 允许 iframe 中 的 表单 被 提交 。 


@ allow-scripts 


allow-scripts 表示 允许 iframe 中 的 内 容 运行 其 中 的 脚本 。 
| 8.4 使 用 object 元 素 链 入 对 象 | 


除了 使 用 前 面 介绍 的 一 些 元 素 方便 用 户 链 入 图 片 、 音 频 和 视频 等 ，HITML 5 还 提供 了 
object 元 素 ， 它 是 一 个 通用 的 用 于 链 入 多 媒体 内 容 的 元 素 ， 其 基本 语法 如 下 : 


<object data = "image.png" ></object> 


二》 实例 102+ 视频 : 链 入 jpg 图 像 


S) 操作 视频 : 视频 \ 第 8 章 \8-4, swf 


<head> 
<meta charset="utf-8"> 


</head> 


<body> 
</body> 
= LEAD icta wma </html> 


[olL PF] 执行 “文件 > 新建 ”命令 ， 新 建 一 个 HTML 5 的 空白 文档 。 在 <title> 标签 中 单 击 并 输 
入 文档 标题 。 

<head> 

<meta charset="utf-8"> 


<title> 链 入 对 象 </ 上 itle> 
</head> 


<body> 


object> 
/object> 


</body> 


i 
02 P| 在 <body> 标签 中 输入 <object></object> 标签 ， 在 <object> 中 输入 相应 的 代码 设置 
链 入 对 象 。 
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IO FP "Li nN iy 


z 
: 


[08 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 8 章 \8-4htnl” 
浏览 器 中 查看 页 面 效果 。 


， 按 F12 键 在 


PY 1: object 元 素 与 enbed 元 素 有 何 区 别 ? 
2 26: object 元 素 用 于 IE 浏览 器 ，embed 元 素 用 于 非 IE 浏览 器 ， 为 了 保 
证 兼容 性 ， 通 常 同时 使 用 两 个 元 素 ， 浏 览 器 会 自动 忽略 它 不 支持 的 标签 。 同 
时 使 用 两 个 元 素 时 ， 应 该 把 <embed> 标签 放 在 <object> 标签 的 内 部 。 


ZE object 元 素 的 属性 


# HTML 5 fB, object 元 素 有 多 种 属性 用 于 设置 链 入 的 对 象 ， 它 的 具体 属性 值 和 说 明 
如 下 : 


属性 值 说 明 
data 该 属性 用 来 指定 对 象 数据 的 位 置 
该 属性 用 来 指定 data 属性 的 内 容 类 型 ， 该 属性 是 可 选 的 ， 但 
是 建议 与 data 属性 一 起 使 用 
name 为 对 象 定义 一 个 唯一 的 名 称 
width 定义 对 象 的 宽度 
height 定义 对 象 的 高 度 
usemap 规定 与 对 象 一 同 使 用 的 客户 端 图 像 映射 的 URL 
align 定义 围绕 该 对 象 的 文本 对 齐 方式 
border 定义 对 象 周围 的 边框 


842 泻 染 对 象 的 规则 
一 般 情况 下 ， 用 户 浏览 器 会 根据 以 下 优先 级 来 泻 染 object 元 素 。 
用 户 的 浏览 器 首先 必须 泻 染 对 象 ， 而 不 是 泻 染 object 元 素 的 内 容 ， 但 是 浏览 器 必须 检 
E object 元 素 的 内 容 ， 因 为 object 元 素 的 内 容 中 有 可 能 包含 param 元 素 或 者 map 元 素 ， 这 
两 个 元 素 可 以 辅助 泻 染 对 象 。 


EE C 
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无 论 是 何 种 原因 导致 的 浏览 器 无 法 泻 染 对 象 ， 浏 览 器 将 会 泻 染 object 元 素 的 内 容 ， 
因此 如 果 需 要 在 head 元 素 内 使 用 object TR, object 元 素 中 不 可 以 包含 用 于 浏览 器 泻 染 
的 内 容 。 


EZE 对 象 初始 化 (param 元 素 )| 


param 标签 为 包含 它 的 <object> 标签 提供 参数 。object 元 素 可 以 包含 任何 数量 的 param 
元 素 ， 并 且 没 有 先后 顺序 要 求 ， 但 是 需要 放置 在 <object> 开始 标签 之 后 ， 基 本 语法 如 下 : 

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Sliderl" 

width="100" height="50"> 

<param name="BorderStyle" value="1" /> 

<param name="MousePointer" value="0" /> 

<param name="Enabled" value="1" /> 

<param name="Min" value="0" /> 

<param name="Max" value="10" /> 

</object> 


param 元 素 有 以 下 两 个 属性 : 
@ name 

该 属性 定义 了 运行 时 参数 的 参数 名 ， 参 数 名 必须 是 对 象 可 以 识别 的 ， 参 数 名 是 否 区 分 
大 小 写 ， 取 决 于 对 象 的 实现 是 否定 义 为 区 分 大 小 写 。 
@ value 


该 属性 定义 了 运行 时 参数 的 参数 值 ， 该 参数 值 与 某 个 参数 名 相对 应 。 


时 param 元 素 允 许 你 为 插入 XHTML 文档 的 对 象 规 定 run-time 设置 ， 在 
XHTML rh, <param> 标签 必须 关闭 。 


8.4.4 

在 使 用 object 元素 链 入 对 象 时 ， 对 象 的 实现 可 以 使 用 两 种 方式 进行 数据 的 泻 染 ， 一 种 
是 内 联 方 式 ， 一 种 是 外 部 数据 。 
@ 内 联 方式 

内 联 方 式 一 般 是 指 将 数据 转换 为 一 种 编码 方式 供 对 象 实现 读 取 ， 编 码 方式 一 般 使 用 的 
是 base64。 
Ə 外 部 数据 

外 部 数据 方式 即 链 接 到 一 个 外 部 文件 ， 例 如 链 入 一 个 图 片 、 一 段 音频 和 视频 或 者 一 个 
Java 文件 。 


%€ 内 联 方式 能 够 较 快 地 进行 泻 染 ， 因 为 数据 位 于 HTML 文件 内 ， 而 外 部 数 
据 方式 则 较 慢 ， 需 要 加 载 和 解码 。 
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| 8.5 使 用 embed 元 素 链 入 多 媒体 对 象 


在 HIML 5 中 ， 还 可 以 使 用 embed 元 素 链 入 各 种 多 媒体 文件 供 插件 使 用 ，embed 元 素 
的 语法 很 简单 ， 通 常用 来 播放 Windows Media Player 支持 的 格式 ， 但 是 也 可 以 播放 一 些 其 
他 的 格式 ， 其 基本 语法 如 下 : 


< embed src="audio.mid" autostart="true" loop="2" width="80" height="30"> 


在 embed 元 素 标签 中 ，ur1 为 音频 或 视频 文件 及 其 路 径 ， 既 可 以 是 相对 
路 径 ， 也 可 以 是 绝对 路 径 。 


在 HTML 5 中 ，embed 元 素 除 了 具有 基本 属性 之 外 ， 还 可 以 自 定义 属性 ， 用 于 向 播放 
多 媒体 内 容 传递 参数 ， 例 如 <embed src="sample.swf' quality="high">， 自 定义 quality 属性 ， 
向 Flash 播放 器 传递 参数 ， 设 置 Flash 的 呈现 质量 为 高 。 
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使 用 autostart 属性 可 以 设置 音频 或 视频 文件 是 否 在 下 载 完成 后 自动 播放 ， 其 基本 语法 
如 下 : 

<embed src="audio.mid" autostart=true> 

<embed src="audio.mid" autostart=false> 


该 属性 有 两 个 属性 值 , 分 别 是 true 和 false, true 表示 在 多 媒体 文件 下 载 完 成 后 自动 播放 ， 
false 表示 在 多 媒体 文件 下 载 完成 后 不 自动 播放 。 


| 8.52 设置 循环 播放 | 


使 用 loop 属性 可 以 设置 音频 或 视频 文件 是 否 在 下 载 完成 后 循环 和 循环 次 数 ， 其 基本 语 
法 如 下 : 

<embed src="audio.mid" autostart=true loop=3> 

<embed src="audio.mid" autostart=true loop=true> 

<embed src="audio.mid" autostart=true loop=false> 


该 属性 有 3 个 属性 值 ， 分 别 是 正 整数 、true 和 false， 当 属性 值 为 正 整数 值 时 ， 表 示 音 
频 或 视频 文件 的 循环 次 数 与 正 整数 值 相 同 ; 属性 值 为 true 时 ， 表 示 音 频 或 视频 文件 循环 ; 
属性 值 为 false 时 ， 表 示 音 频 或 视频 文件 不 循环 。 


8.5.3 控制 面板 的 显示 


使 用 hidden 属性 可 以 设置 控制 面板 是 否 显示 ， 默 认 值 为 ao， 其 基本 语法 如 下 : 
<embed src="your.mid" hidden=ture> 
<embed src="your.mid" hidden=no> 
hidden 属性 有 两 个 属性 值 ， 分 别 是 true 和 no, tue 表示 在 页 面 中 隐藏 面板 ，no 表示 在 
面板 中 显示 面板 。 


EE o 


第 8 章 ” 链 入 内 联 框架 、 对 象 和 其 他 多 媒体 元 素 国 人 


38.54 W4 Eik] 


使 用 starttime 属性 可 以 设置 音频 或 视频 文件 开始 播放 的 时 间 ， 如 果 未 定义 该 属性 ， 则 
表示 从 文件 开头 播放 ， 基 本 语法 如 下 : 


<embed src="audio.mid" starttime="00:10"> 


8.5.5 WA iE NN 


使 用 volume 属性 可 以 设置 音频 或 视频 文件 的 音量 大 小 ， 如 果 未 定义 该 属性 ， 则 表示 
使 用 系统 本 身 的 设 定 ， 基 本 语法 如 下 : 


<embed src="audio.mid" volume="10"> 


:Xe 测 设置 容器 属性 


使 用 height 和 width 属 性 可 以 设置 控制 面板 的 高 度 和 宽度 。height 用 于 控制 面板 的 高 度 
width 用 于 控制 面板 的 宽度 ， 基 本 语法 如 下 : 


<embed src="audio.mid" height=200 width=200> 


"4 height 属性 的 取 值 和 width 属性 的 取 值 均 为 正 整数 或 者 百分数 ， 单 位 
为 像素 。 
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使 用 controls 属性 可 以 设置 控制 面板 的 外 观 ， 其 默认 值 为 console， 基 本 语法 如 下 : 


<embed src="audio.mid" controls=smallconsole> 


controls 属性 一 共有 6 个 属性 值 ， 分 别 是 console, smallconsole. playbutton, pausebutton. 
stopbutton 和 volumelever。 
@ console 表 示 为 一 般 正 常 面 板 。 
smallconsole 表 示 为 较 小 的 面板 。 
playbutton 表 示 为 只 显示 播放 按钮 。 
pausebutton 表 示 只 显示 暂停 按钮 。 
stopbutton 表 示 只 显示 停止 按钮 。 
© volumelever 表 示 只 显示 音量 调节 按钮 。 


设置 对 象 名 称 和 文字 说 明 | 
使 用 name 属性 可 以 为 对 象 定义 一 个 名 称 ， 便 于 其 他 对 象 使 用 ， 其 基本 语法 如 下 : 


<embed src="audio.mid" > 


使 用 title 属性 可 以 设置 音频 或 视频 文件 的 说 明文 字 ， 其 基本 语法 如 下 : 


<embed src="audio.mid" title=" 一 首 歌 的 时 间 "> 


© HT 5》 网 页 制作 > 全程 揭秘 | 
8.5.9 


使 用 palette 属性 可 以 设置 嵌入 的 音频 或 视频 文件 的 前 景色 和 背景 色 ， 第 一 个 值 为 前 景 
色 ， 第 二 个 值 为 背景 色 ， 中 间 用 | 隔 开 ， 其 基本 语法 如 下 : 


<embed src="audio.mid" palette="red|black"> 


ç embed 元 素 的 color 属性 的 值 可 以 是 RGB， 也 可 以 是 颜色 名 称 ， 还 可 以 
Æ transparent (透明 ) 。 


设置 对 齐 方式 


使 用 embed 元 素 的 align 属性 可 以 设置 控制 面板 和 当前 行 中 对 象 的 对 齐 方式 ， 其 基本 
语法 如 下 : 

<embed src="audio.mid" align=top> 

align 属性 一 共有 10 个 属性 值 ， 分 别 是 top、bottom、center、baseline、 left、right、 
texttop、middle、 absmiddle 和 absbottom。 

@ center 表 示 控 制 面板 居中 。 

@ left 表 示 控 制 面板 居 左 。 

@ right 表 示 控 制 面板 居 右 。 
@ top 表 示 控 制 面 板 的 顶部 与 当前 行 中 的 最 高 对 象 的 顶部 对 齐 。 
@ bottom 表 示 控 制 面板 的 底部 与 当前 行 中 的 对 象 的 基线 对 齐 。 
© baseline 表 示 控 制 面板 的 底部 与 文本 的 基线 对 齐 。 
@ texttop 表 示 控 制 面板 的 顶部 与 当前 行 中 的 最 高 的 文字 顶部 对 齐 。 
@ middle 表 示 控 制 面板 的 中 间 与 当前 行 的 基线 对 齐 。 
© absmiddle 表 示 控制 面板 的 中 间 与 当前 文本 或 对 象 的 中 间 对 齐 。 
@ absbottom 表 示 控 制 面板 的 底部 与 文字 的 底部 对 齐 。 


[加 实例 103+ 视频 : 链 入 swf 文件 | 


DE 


f 源 文件 : 源 文件 \ 第 8 章 \8-5-10.html A 操作 视频 : 视频 \ 第 8 章 \8-5-10. swf 
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<head> 
<meta charset="utf-8"> 


title> 树 入 swf 文 件 </title> 


</nead> 


<body> 
</body> 
</html> 


[Lo1 P| 执行 “文件 > 新建” 命令 ， 新 建 一 个 HTML 5 的 空白 文档 。 在 <title> 标签 中 单 击 并 输 
入 文档 标题 。 


<body> <body> 


<= Eanes 
</embed> 
/embed> I 
</body> ariii 
</html> 


C02 PÆ <body> 标签 中 输入 <embed></embed> 标签 ， 在 <embed> 中 输入 src="851001.swf' 代码 
设置 链 入 swf 文件 的 路 径 。 


输 入 type="application/x-shockwave-flash" 设置 embed 链 入 对 象 的 类 型 输入 
hidden="no" width="500" height="300" 设置 控制 面板 的 显示 。 
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TIRE AE 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 8 章 \8-5-10html” , j F12 Ë 
在 浏览 器 中 查看 页 面 效果 。 


© HTML 5 > 网 页 制作 > 全 程 揭秘 
2? 


提问 : embed 支持 的 格式 有 哪些 ? 


答 : embed 可 以 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、 
AU 和 MP3 等 。 


8.6 本章 小 结 


本 章 主 要 讲解 了 如 何在 HTML 5 中 链 入 内 联 框架 、 对 象 和 其 他 多 媒体 元 素 。 通 过 本 章 


的 学 习 ， 读 者 可 以 熟练 掌握 iframe 元 素 、object 元 素 和 embed 元 素 在 网 页 中 的 使 用 方法 和 
技巧 。 


第 9 章 使 用 表单 


表单 在 网 页 中 主要 负责 数据 采集 功能 。 一 个 表单 有 3 个 
基本 组 成 部 分 : “表单 标签 ”包含 了 处 理 表单 数据 所 用 CGI 
程序 的 URL 以 及 数据 提交 到 服务 器 的 方法 。“ 表 单 域 ” 包 
含 了 文本 框 、 密 码 框 等 。“ 表 单 按钮 ”包括 提交 按钮 、 复 位 
按钮 和 一 般 按钮 。 


| 9.1 表单 标签 < form> 


、 
在 网 页 中 <form>…</form> 标签 对 用 来 创建 一 个 表 
单 ， 即 定义 表单 的 开始 和 结束 位 置 ， 用 于 声明 表单 ， 定 义 


Essss: 
采集 数据 的 范围。 
只 点 


EE 
: 
E 
ARR 提交 表单 action 本 章 知 识 | 


action 属性 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 。 


7] 了 解 表单 标签 
它 可 以 设置 为 一 个 URL 地 址 ( 提交 给 程式 ) 或 一 个 电子 邮 
ki Ç] 掌握 表单 对 象 的 插入 方法 | 
代码 格式 : Š i j 
i Ap os 7] 了 解 菜单 和 列表 
</form> 
v] 了 解 文本 域 标签 
D 实例 104+ 视频 : 设置 表单 action 属性 
=== v| 认识 id 标签 


f 源 文件 : 第 9 章 \9-1-1.html A 操作 视频 : 第 9 章 \9-1-1. swf 


CD 大 努力 做 到 最 好 - 


01 P| 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 
文档 。 切 换 到 代码 视图 中 ， 在 <body> 标签 下 输入 内 容 。 


© MDA ) 


ma Q u Mo; í mees 


Ez F12 键 测 试 页 面 效果 。 


W 提问 表单 中 可 以 包含 哪些 内 容 ? 
答 : 表单 中 可 以 包含 文本 域 、 复 选 框 、 单 选 按钮 和 复 选 按钮 等 ， 用 于 向 
指定 的 URL 传递 用 户 数据 。 


CAPE 表单 名 称 name 


name 参数 给 表单 命名 ， 主 要 为 了 程序 可 以 区 分 每 一 个 表单 。 为 了 防止 表单 提交 到 后 台 
处 理 程序 时 出 现 混乱 ， 一 般 需要 给 表单 命名 。 

代码 格式 : 

<form name=" 表 单 名 称 "> 


g 表单 名 称 中 不 能 包含 特殊 字符 和 空格 ， 因 为 特殊 字符 和 空格 不 能 被 程序 
识别 。 
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f 源 文件 : 源 文件 \ 第 9 章 \9-1-2.html A 操作 视频 : 视频 \ 第 9 章 \9-1-2. swf 
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led-3" x 


Bl 拆 分 | 设计 ama Q O MC Fm 


<meta charset="utf-8"> 
<cicle> 无 标题 文档 </cicle> 
</head> 


务 提出 宝贵 意见 ， 我 们 会 尽 最 大 努力 做 到 最 好 。 


mailto:gongsi@. com" 


[Lo1 上 打开 “素材 \ 第 9 章 \9-1-1.html”， 切 换 到 代码 视图 中 ， 添 加 name 属性 为 forml。 
E EE) | JEN 
OTE -025m Se I¥ 
z nasa =. ++ e esos an E PRD: 
k mme s uennasn A Ee 


[pemon BABAR 


9), EAT + is 
DUR wiet ER ame Ees 


[t @umzezzame —menzw e m- C oli l- wx + 
(02 PAIT “X> 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-1-2 html”， 按 Fl12 键 测 试 
页 面 效 果 。 


2% 提问 : 表单 有 什么 作用 ? 
2: 在 网 页 中 ， 表 单 是 一 个 特定 区 域 ， 有 限定 表单 范围 和 携带 表单 的 相 
关 信息 两 个 作用 。 


AER 传送 方法 method 


method 参数 用 于 指定 在 数据 提交 服务 器 的 时 候 ， 可 以 取 值 get 和 post。 当 取 值 get B$, 
表单 数据 附加 到 action 属性 指定 的 URL 上 ， 被 送 到 处 理 程序 上 ; 当 取 值 post 时 ， 表 单数 
据 被 包含 在 表单 主体 中 ， 被 送 到 处 理 程序 上 。 

代码 格式 : 


<form method=" 传 送 方法 "> 


GET 方式 是 将 数据 附加 在 URL 信息 上 并 传送 给 Web 服务 器 ， 所 以 能 够 上 
传 的 数据 很 有 限 ， 但 是 它 的 使 用 方法 比较 灵活 ; 而 POST 方式 将 数据 独立 成 
块 地 传送 给 Web 服务 器 ， 能 够 上 传 的 数据 量 较 大 。 


区 3 十 HTML 5 > 网 页 制作 > 全 程 揭秘 
m 实例 106+ 视频 : 设置 表单 传送 方法 
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AESH: 源 文件 \ 第 9 章 \9-1-3.html SÀ) 操作 视频 : 视频 \ 第 9 章 \9-1-3. swf 
z 一 === x x ss 
酒 ] 9 | 设计 mam (Q. O oC mm: 


<!doctype html> 


ya 
| 
H 
: 
: 
lj 
: 
: 
p 
! 


si 


Hi 


<meta charset="utf-8"> 
<title> 程 序 提交 </title> 
</head> 


iir: 
u; 


i aaa 


<body> 
欢迎 对 我 们 的 服务 提出 宝贵 意见 ， 我 们 会 尽 最 大 好 力 做 到 最 好 。 
<form action="mailto:gongsi@.com" name="form1" 


</form> 


</body> 
</html> 


“ 源 文件 \ 第 9 章 \9-1-2.html” 文 档 打 开 ， 切 换 到 代码 视图 中 ， 添 加 method 属性 ， 
并 设置 属性 值 为 post。 
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(02 pis “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 A9-1-3 html”, f F12 键 
测试 页 面 效果 。 


提问 : 表单 中 有 哪些 不 显示 ? 
答 : 在 网 页 表单 中 处 理 表单 的 脚本 程序 的 位 置 和 提交 表单 的 方法 等 信息 
对 于 浏览 者 是 不 可 见 的 。 


第 9 章 使 用 表单 B 


9.1.4 编码 方式 


enctype 参数 用 于 设置 表单 信息 提交 的 编码 方式 。enctype 是 EncodeType 的 简写 。 
代码 格式 : 
<form enctype=" 编 码 方式 "> 


* 图 可 gamsa — -De a SU a a 
Wanta ;isasaan. RNARRAENNSIR | 


eE | 


f 源 文件 : 源 文件 \ 第 9 章 \9-1-4.html A 操作 视频 : 视频 \ 第 9 章 \9-1-4 swf 


38 | 拆 分 | 设计 AWA G. Ç. MC fm: 
<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 c/title> 
</head> 


<body> 
欢迎 对 我 们 的 服务 提出 宝贵 意见 ， 我 们 会 尽 最 大 好 力 做 到 最 好 。 
<form action="mailto:gongsi@.com" name="forml" 
Bethod=“post” 


enctype="application/x-www-form-urlencoded"> 


appl: 


Br TETA 
DBE mienie EA ame 


[到 六 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-1.4html”， 按 Fl2 键 
测试 页 面 效果 。 
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提问 : enctype 有 几 种 取 值 方式 ? 

答 : enctype 有 两 种 取 值 方式 : application/x-www-form-urlencodeed 是 
默认 的 编码 方式 ，multipart/form-data 是 MIME 编码 方式 。 上 传 文件 的 表单 
必须 设置 为 该 项 。 


EZE 目标 打开 方式 target | 


target 参数 用 来 指定 窗口 的 打开 方式 。 
代码 格式 : 
<form target=" 目 标 窗口 的 打开 方式 "> 


</form> 


@ 目标 窗口 的 打开 方式 有 5 种 : blank、_parent、_self、_top 和 
new。_blank 在 新 窗口 打开 ，_parent 在 父 窗口 打开 ，_self 在 链接 的 同一 
窗口 ，_top 在 最 顶层 的 窗口 打开 ，new 则 是 永远 使 用 一 个 窗口 打开 。 


m 实例 108+ 视频 : 在 新 窗口 中 打开 链接 


L m- GQ * z U| - wa + 


f 源 文件 : 源 文件 \ 第 9 # A 9-1-5.html A 操作 视频 : 视频 \ 第 9 章 \9-1-5. swf 


ex 
J359 | ét amma Q & oC m. 元 标 是 六 档 
rao 


ctype html> 


01 PHT “X> 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 
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(02 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-1.5 html”， 按 F12 Ë 
测试 页 面 效果 ， 单 击 “ 提 交 ” 按钮， 打开 新 的 页 面 。 


2€ 
* 


提问 : target 属性 一 般 和 哪些 元 素 配 合 使 用 ? 
答 : target 属性 用 来 指定 输入 数据 结果 显示 在 哪个 窗口 ， 某 些 情况 下 需 
要 与 frame 元 素 配合 使 用 。 


92 插入 表单 对 象 ， 


表单 由 许多 不 同 的 表单 元 素 组 成 ， 这 些 表单 元 素 称 为 表单 对 象 。 表 单 对 象 包括 文字 字 
段 、 单 选 按钮 、 复 选 框 等 。 


PAM 文字 字段 Text 


文字 字段 是 最 常见 的 表单 元 素 ， 可 以 在 其 中 输入 文字 和 字符 。 

代码 格式 : 

<input name=" 控 件 名 称 " type="text" value=" 文 字 字段 的 默认 取 值 ” size=" 控 件 长 度 " 
maxlength=" 最 长 字符 数 "/> 


在 该 语法 中 包含 了 很 多 参数 ， 它 们 的 含义 和 取 值 方法 不 同 。 


参数 类 型 含义 
type 指定 表单 元 素 的 类 型 
name 指定 表单 元 素 的 名 称 ， 区 别 于 其 他 表单 元 素 
value 指定 文本 字段 的 默认 值 
size 指定 文本 字段 在 页 面 中 的 显示 长 度 
maxlength 指定 文本 字段 最 多 可 以 输入 的 字符 数 


ODS J 


sb 实例 109+ 视频 : 创建 文字 字段 


m- 2 + s D - mx + 


f 源 文件 : 源 文件 \ 第 9 章 \9-2-1.html A 操作 视频 : 视频 \ 第 9 章 \9-2-1. swf 


酒 | 拆 分 | 设计 再 所 图 A Ç. MC 标题 : +E 


<meta charset="utf-8": 
<cicle> 无 标题 文档 </cir: 
</head> 


<body> 
<form name="form1" method="post" action="9-2-1.htm" >| 
花 名 : 


<input name="name" type="text" size="15" /> 


CPA ARE RS, Sri — = F ff) HIMI 5 AE 切换 到 代码 视图 中 ， 在 


<body> 标签 下 输入 内 容 。 


了] 拆 分 | 设计 /| 实时 视图 QQ. QÇ. 00. s EX C Fm: HE 
< html> 


CE “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 9- 2-1.html” , a ED 键 
测试 页 面 效果 。 


ç 


Size 属性 定义 文本 字段 的 长 度 ， 最 小 值 为 1， 最 大 值 将 取决 于 浏览 器 的 
宽度 。 可 以 通过 设置 其 数值 获得 满意 的 尺寸 。 


2? 


提问 : 文本 域 的 默认 宽度 是 多 少 ? 
答 : 在 大 多 数 浏览 器 中 ， 文 本 域 的 默认 宽度 是 20 个 字符 。 为 了 获得 更 
好 的 页 面 效 果 ， 可 以 随意 设置 文本 域 的 宽度 。 


第 9 章 使 用 表单 B 
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密码 域 和 文本 字段 的 各 属性 是 相同 的 。 所 不 同 的 是 密码 域 输入 字符 全 部 以 “*” 显 示 。 
代码 格式 : 


<input name=" 控 件 名 称 " type="password" value=" 文 字 字 段 的 默认 取 值 ” size=" 控 件 的 长 度 
"maxlength=" 最 长 字符 数 "/> 


大 实例 110+ 视频 : 创建 密码 域 


f 源 文件 : 源 文件 \ 第 9 章 \9-2-2. html A 操作 视频 : 视频 \ 第 9 章 \9-2-2. swf 
n a aan wa mam won eno om mn on | m samm “Q G. M 24 C BB: AS 


Qua t wa Gan 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
<form name="forml" method="post" action="9-2-2.htm" >f 
qq: 


<input name="user" type="text" size="15" /> 


</torm> 
</body> 


<body> 标签 下 输入 内 容 。 
B| | üt sans GQ. O MLC pE AREE r 


* > @ @ ú O % semma | 加 
* uz Sommi oem grme pn @ 
<meta charset="utf-8"> qo wa E= 
<title> 无 标题 文档 c/title> 
</head> 
<body> 
<form pamem"forml" metbod-"post" action="9-2-2.htm" > 
qq: 


<input name="user" type="text" size="15” /> 
<input name="password" type="password" value="12345" 
size="10" maxlength="6"/> 

</form> 


</body> ü 
</html> 1e z EQ e 33 加 |- m + 


[到 站 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9.2.2 html”， 按 Fl2 键 
测试 页 面 效果 。 


© MDEE 


提问 : 密码 域 中 可 以 实现 什么 特殊 效果 ? 

答 : 密码 域 也 是 一 种 文本 域 的 形式 ， 其 中 的 文字 除了 以 星 号 (*) 显示 外 ， 
还 可 以 以 圆 点 (s) 显示 。 同 时 也 可 以 通过 和 JavaScript 配合 使 密码 内 容 显示 
出 来 。 


923 
单 选 按钮 是 一 组 小 而 圆 的 按钮 ， 只 能 选中 其 中 一 项 ， 选 中 某 个 选项 时 ， 出 现 一 个 小 实 
心 圆 点 表示 单 选 按钮 该 项 被 选中 。 代 码 格式 如 下 : 
<input name=" 单 选 按钮 名 称 ”type="radio"” value=" 单 选 按钮 的 取 值 "checked /> 
单 选 按钮 中 必须 设置 value 的 值 ， 对 于 一 个 单 选 按钮 组 的 所 有 单 选 按钮 来 说 ， 设 置 为 
相同 的 名 称 ， 这 样 后 台 程 序 才 能 对 某 一 选择 内 容 进行 判断 。 


? 在 一 个 单 选 按钮 组 中 ， 无 论 有 多 少 个 单 选 按钮 ， 只 有 一 个 单 选 按钮 可 
以 设置 为 checked， 这 是 单 选 按钮 的 特征 。 


mb 实例 111+ 视频 : 创建 单 选 按钮 


+e eso 4 ni - R. Pra. m| 


* ñm muasmunqusa Omm DRRR DM Gimi: cm s 
M enor 


q Gam: as masse anos. m- G Oln m - um + 


f 源 文件 : 源 文件 \ 第 9 章 \9-2-3.html A 操作 视频 : 视频 \ 第 9 章 \9-2-3. swf 


酒 ] 拆 分 | @&t mama “Q G. 内 be r 4 C WB. E 


</head> 


f] 
3| 
Ea 


[01 站 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


EE C 
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酒 ] 拆 分 | @t aae “Q. Ç. 埠 5 FG 标量 REE  — = =L ET 
<!doctype html> Sga ~ B h 
<html> E3300 2 meyit - || m: C = | 于 
<head> * | 国 Es Seanno arm 四 NE Qin È aso. Ces 
<meta charset="utf-8"> um. eser 
<title> 无 标题 文档 c/title> 
</head> 
<body> 
<form name=nformi" serhod-"poat" action="9-2-3.htm" > 
性 别 : 


<input name="radiobutton" type="radio" 
valve="radiobutton" checked="checked"> 


<input type="radio" name="radiobutton” value="radiobutton"/> 
x 
</torm> 


</body> mn 
wisa; UE 3 8- 22 oln m - mx + 


02 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 9 S \9-2-3.html”， 按 Fl12 键 
测试 页 面 效 果 。 


ze 


提问 : 什么 控件 形式 不 需要 定义 属性 value ? 
答 : 属性 value 用 来 设 定 初始 值 ， 它 是 可 选 的 ， 当 控件 形式 是 单 选 按钮 
或 复 选 框 ， 就 不 需要 定义 属性 value。 


9.2.4 


复 选 框 可 以 让 用 户 从 复 选 框 组 中 选择 超过 一 个 的 选项 ， 用 户 可 以 任意 选择 搭配 。 
代码 格式 : 
<input name=" 复 选 框 名 称 "” type="checkbox" value=" 复 选 框 的 取 值 "checked /> 


时 同一 个 组 的 复 选 框 可 以 拥有 不 同 的 名 字 ， 一 个 独立 的 网 页 可 以 拥有 许多 
组 不 同 的 复 选 框 。 


对 实例 112+ 视频 : 创建 复 选 杠 


cala 
Em :EE 
* > @ e © [% nmay -| -EE TTE] 
k sz #wgnnuse Gamm Deme in PTN- O rohim » 


ERMZR: UPR DRP TREE r EKITS 


4 
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f 源 文件 : 源 文件 \ 第 9 章 \9-2-4.html A 操作 视频 : 视频 \ 第 9 章 \9-2-4. swf 


EE 


© MDD J 
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[CI] 执行 “文件 > 新建” 新 建 一 个 空白 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


am x 


| Q. Q. Mk. p IC Ta A | 


ERORAR. w sz Rm ERRI E EKLER 


[ 02 PRAHE, HT AERE G, RREA EL S 9 章 \9-2-4html”， 
JÈ F12 键 测试 页 面 效果 。 


? O ii: 同一 表单 中 的 复 选 框 是 否 可 以 使 用 同一 个 名 称 标识 ? 
答 : 多 个 在 同一 个 表单 中 的 复 选 框 可 以 使 用 同一 个 名 称 标识 ， 在 提交 时 
每 一 个 处 于 选中 状态 的 复 选 框 都 会 形成 一 个 “名 称 / 对 ”。 


按钮 是 网 页 中 常见 的 元 素 。 普 通 按 钮 需要 配合 脚本 来 进行 表单 处 理 。 
代码 格式 : 
<input name=" 按 钮 名 称 " type="submit" value=" 按 钮 的 取 值 ”onclick=" 处 理 程序 ” /> 


mp 实例 113+ LAE: MESAR nem 


*siimtaqu <= m8D 
E 


(o omn meren meme mi Go m - mv + 


An 源 文件 \ 第 9 章 \9-2-5.html A 操作 视频 : 视频 \ 第 9 章 \9-2-5. swf 
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En 


"> —— 
fale mam (Q. O 0 2 rí C SH. E 


Pa 
` 
ra 
|a sme 
oome <meta charset="utf-8": 
a, Pee 
bis </head> 
<boay> 
<form nane-"torm" method="post" action="9-2-5.htm" > 
单 击 此 按钮 可 以 关闭 窗口 
</torm> 
</boay> 
<html> 


CPhI xE" 命令 新 建 一 个 空白 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 
S 


<meta charsec="ucr-e" 
<title: ee te e> 
</head> 


<body> 
«romm name-"formi" method="post” actlon-"9-2-5.ntm" > 
PARATUA 


<inpot type="submit" nape="submit" valoe=nž ið O" 


4 e=" meme B Ga s C| - wa + 


[ 02 P| 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-2-5.html”， 按 F12 键 
测试 页 面 效果 。 


2 提问 : 什么 是 控件 ? 
答 : 用 户 与 表单 交互 是 通过 控件 进行 的 ， 控 件 是 通过 name 属性 标识 的 ， 
该 属性 的 作用 范围 是 控件 所 在 的 form 元 素 内 。 


ARRERA, 可 以 实现 表单 内 容 的 提交 。 
代码 格式 : 
<input name=" 按 钮 名 称 ”type="submit" value=" 按 钮 的 取 值 ” /> 


m 实例 114+ 视频 : 创建 提交 按钮 


> 2 e o o [5 morman -E aa. E 
= 

a 

ET SLEITE === = 
f 源 文件 : 源 文件 \ 第 9 章 \9-2-6.html A 操作 视频 : 视频 \ 第 9 章 \9-2-6. swf 


© DADEN J 


CEA == wama = Zidoctype html> 
> 


C Phi Xk 2 SE” G, 新 建 一 个 空白 的 HIML 5 文档。 切换 到 代码 视图 中 ， 在 
e 
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[02 多 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 9 章 \9-2-6.html”， 按 Fl12 键 
测试 页 面 效果 。 


?4 


提问 : 提交 按钮 的 提交 目标 是 什么 ? 
答 : 当 按 钮 被 用 户 单 击 时 ， 表 单 中 所 有 控件 的 “名 称 / 值 ”被 提交 ， 提 
交 的 目标 是 form 元 素 的 action 属性 所 定义 的 URI 地 址 。 


单 击 重 置 按钮 用 来 清除 用 户 在 页 面 中 输入 的 信息 。 
代码 格式 : 
<input name=" 按 钮 名 称 "” type="reset" value=" 按 钮 的 取 值 ” /> 


mb 实例 115+ 视频 : 创建 重 置 按钮 


er rr 

* 图 BR Awarni È cma 

q 

=m, 

= E * 

4 Prnt ER — — 
f 源 文件 : 源 文 件 \ 第 9 章 \9-2-7. html A 操作 视频 : 视频 \ 第 9 章 \9-2-7. swf 
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IAP DINESTCErCIIELG™ CIPE CERC" SEE TS 7 


<input name="textfield2" type="text" size="10"/> 


<input name="radiobutton" type="radio" value="radio] 


<input name="radiobutton” type="radio" value="radio| 
x 


</body> 


[91 Pj 执行 “文件 > IE” 命令 ， 将 “ 源 文件 \ 第 9 章 \9.2-6 html” 打开 。 在 <input> 标签 
的 下 方 ， 再 次 输入 一 个 <input> 标签 ， 为 该 标签 定义 type、name 和 value 属性 ， 并 为 每 个 
属性 添加 属性 值 。 


asina 


CHL ç s m - wv + 


[ 02 多 执行 “文件 > 另存 为 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 9 章 \9-2-7.html”， 按 Fl12 
键 测试 页 面 效果 。 


? é 
* 


提问 : 重 置 按 钮 的 “名 称 / 值 ”是 否 可 以 和 表单 一 起 提交 ? 
答 : 将 type 属性 的 属性 值 设置 为 reset， 创 建 重 置 按钮 ， 重 置 按钮 的 “名 
称 / 值 ”不 与 表单 一 起 提交 。 


9.2.8 
图 像 域 一 般 会 应 用 到 表单 中 ， 作 用 就 是 触发 表单 的 相关 操作 ， 与 按钮 的 功能 和 类 型 是 
类 似 的 ， 都 是 作为 表单 内 部 的 对 象 来 使 用 的 ， 只 是 图 像 域 以 图 片 的 方式 显示 。 而 图 像 域 如 
果 单 独 使 用 的 话 ， 是 没有 任何 意义 的 。 
代码 格式 : 
<input name=" 图 像 域 名 称 " type="image" src=" 图 像 路 径 ” /> 


g 图 像 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 。 一 般 使 用 相对 路 径 ， 这 
样 便于 移植 。 


© HTML 5 > 网 页 制作 > 全 程 揭秘 ] 


友 实例 116+ 视频 .创建 闹钟 按钮 


é + 3 @ 9 O [rnem] E-E ergel 
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单 击 按 针 显示 当 首 时 间 
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A 操作 视频 : 视频 \ 第 9 章 \9-2-8. swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


Sair 
name="form1" method="post" action="9-2-8.htm" > 

wagmnasnpiii 

<br/> 


</torm> 
</body> 


</html> 


[9 >] 执 行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 AIRERA, 在 
<body> 标签 下 输入 内 容 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


asss 
name="form1" method="post" action="9-2-8.htm" > 

matstamasinaiki 

<br/> 

<input type="image" nane="image" src="images/clock.png" /> 

</torm> 

</body> 

</html> 


[ 02 P| 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-2-8.html” a F12 键 
测试 页 面 效果 。 


提问 : 为 何 有 时 候 无 法 显示 图 像 ? 
答 : 因为 用 户 使 用 的 浏览 器 不 同 ， 如 果 用 户 使 用 的 是 非 图 形 化 浏览 器 ， 
就 无 法 显示 图 像 ， 因 此 可 以 使 用 alt 属性 来 提供 一 个 替代 文字 。 


隐藏 域 包含 一 些 要 提交 服务 器 的 数据 ， 但 这 些 数据 对 于 用 户 来 说 是 不 可 见 的 ， 不 显示 
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在 浏览 器 中 。 
代码 格式 : 


<input name=" 隐 藏 域名 称 ”type="hidden value=" 隐 藏 域 的 取 值 ” /> 

隐藏 域 的 优点 : 不 需要 任何 服务 器 资源 ; 支持 广泛 ， 任 何 客户 端 都 支持 隐藏 域 ; 实现 
简单 ， 隐 藏 域 属于 HTML 控件 ， 无 须 像 服务 器 控件 那样 需要 编程 知识 。 

缺点 : 如 果 存 储 了 较 多 的 较 大 的 值 ， 则 会 导致 性 能 问题 ， 具 有 较 高 的 安全 隐患 。 


mb 实例 117+ 视频 : ; 藏 域 
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* > @ e 9 O |< nemi -|E 
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单 击 按 包 显示 当前 时 间 


fü 源 文件 : 源 文件 \ 第 9 章 \9-2-9.html 


系 加 隐 


PR 


> 打开 ” 
代码 视图 中 ， 在 <body> 标签 中 输入 <input> 标签 ， 为 该 标签 添加 type. name 和 value 属性 ， 


[GD 执行 “文件 


并 为 每 个 属性 添加 属性 值 。 


命令 , 将 “ 源 


= [Ls 


g - = 


A 操作 视频 : 视频 \ 第 9 章 \9-2-9, swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-38"> 
<ctcle> 无 标题 文档 </cicle> 
</head> 


<body> 
<form name=eforml， 
单 击 技 钮 显示 当前 时 间 
<br/> 


<inpat type="hidden" name="hidden” value=91" /> 
type="image" name="image" sro="images/92801.png" /> 


" sezhod="post" action="9-2-8,htm" > 


文件 \ 第 9 章 \9-2-8.html” 打 开 。 将 界面 切换 到 


| 
BE miete ga pa 加 


= 


We h >l 


Somas Os Dae AID Èis: c 


| asmen 
22090 


OEKE 


O - mx + 


[62 了 9 打开 “ 源 文件 \ 第 9 章 \9-2.8html”， 切 换 到 代码 视图 ， 修 改 代码 ， 执 行 “文件 > 
保存 ”命令 ,将 其 保存 为 “ 源 文 件 \ 第 9 章 \9-2-9.html”， 按 F12 键 测试 页 面 效果 。 


EE 


© DEE 


提问 : 隐藏 控件 用 来 存储 哪些 信息 ? 
答 : 一 般 情况 下 ， 隐藏 控件 用 来 存储 用 户 输入 的 姓名 、 电 子 邮件 地 址 
或 偏好 的 浏览 方式 等 信息 。 


9.2.10 


文件 域 在 上 传 文件 时 常常 用 到 ， 它 用 于 查找 硬盘 中 的 文件 路 径 ， 然 后 通过 表单 将 选中 
的 文件 上 传 ， 上 传 图 像 时 也 常常 用 到 。 
代码 格式 : 


<input name=" 文 件 域名 称 " type="file" size=" 控 件 长 度 " maxlength=" 最 长 字符 数 " /> 


时 


文件 域 便 于 上 传 文件 ， 因 为 网 页 中 经 常会 上 传 文件 、 图 像 ， 使 用 文件 域 
表单 元 素 会 很 方便 。 


mb 实例 118+ 视频 : 在 网 页 中 上 传 照片 


NE 图 E 
* + C€ e 9 O EED PADr'|E TI D 
* We NRR Q sm ETER DIB @ Foma OVD Can ~ L aa 
Hie: MEZE) Sanet 
b 
d| Gaam r aenea zn+wess sans. B- G On Q - x + j = n m a j 
f 源 文件 : 源 文件 \ 第 9 章 \9-2-10.html SÀ) 操作 视频 : 视频 \ 第 9 章 \9-2-10. swf 


rset="utf-8"> 
.e> 无 标题 文档 <c/title> 
ay 


—"form1" method="post" action="9-2-10.htm" 
"multipart/form-data"> 


ame="file" type="file" size="30" maxlength-"32"/> 


Ce 


< 
i </body> 
= </hrml> 


[01_ P| 执 行 “ 文 件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 
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rmm x] * 
> @ @ ° Oli nemmi -|E PAB :|s 
* AEs Sangunusa gamm DEE Qin Orma: Cs- [Dre 


Eai GERZE) 全 
h 


[sme F) C m 


[62z 了 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9.2-10html”， 按 F12 键 
测试 页 面 效果 ， 单 击 页 面 中 的 按钮 ， 观 察 制 作 的 按钮 效果 。 


wW 提问 : 创建 文件 选择 框 有 什么 要 求 ? 
答 : 创建 文件 选择 框 的 要 求 是 必须 使 用 post 方法 将 文件 从 浏览 器 传输 
到 服务 器 ， 因 此 需要 设置 form 元 素 的 method 属性 的 属性 值 为 post。 


B-G olz Dl- 


| 9.3 菜单 和 列表 


菜单 和 列表 的 功能 与 复 选 框 和 单 选 框 的 功能 比较 相似 ， 都 可 以 列举 出 很 多 的 选项 供 浏 
览 者 选择 , 最 大 的 好 处 就 是 可 以 在 有 限 的 空间 内 为 用 户 提供 更 多 的 选项 , 非常 节省 网 页 版 面 。 
其 中 列表 可 以 使 用 户 能 够 浏览 许多 项 ， 并 进行 多 重 选择 ;而 菜单 默认 仅 显 示 一 项 ， 该 项 为 
活动 选项 ， 用 户 可 以 通过 单 击 打开 菜单 ， 但 只 能 选择 其 中 的 一 项 。 


9.3.1 


下 拉 莱 单 在 正常 状态 下 只 显示 一 个 选项 ， 单 击 下 拉 按 钮 打开 菜单 后 ， 才 会 看 到 全 部 的 
选项 ， 是 一 种 最 节省 页 面 空间 的 选择 方式 。 


g- 页 面 中 下 拉 菜 单 的 宽度 是 由 《option> 标签 中 包含 的 最 长 文本 的 宽度 来 
决定 的 。 


代码 格式 : 


<select name=" 下 拉 菜 单 名 称 "> 
<option ”value=" 选 项 值 ” selected> 选 项 显示 内 容 


</select> 


@ selected 表示 该 选项 在 默认 情况 下 是 选中 的 ， 一 个 下 拉 菜 单 中 只 有 一 
个 默认 选项 被 选中 。 选 项 值 是 提交 表单 时 的 值 ， 而 选项 显示 内 容 才 是 真正 在 


页 面 中 显示 的 选项 内 容 。 
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m 实例 119+ 视频 : 创建 下 拉 菜 单 


PRE: 


* MaR Wasmenene M EER PID @ fmia WO- Caa. D Poki > 


Em. [Eu 加 
Em 


A 操作 视频 : 视频 \ 第 9 章 \9-3-1. swf 


Ow m o a 
men wau wav man sam wu eno men sow sss 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


</head> 


<body> 
Storm actios="9-3-1.html" zethod="post" name="forml"> 
五 后 : 


<select name="select"> 


</select> 
</torm> 


CAs “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 <form> 标签 和 <select> 标签 ， 并 为 这 些 标 签 定义 属性 以 及 属性 值 。 


| 3 eula 
Asme Š 

<head> H 

<meta charset="utf-8"> * > @ @ OE Semma 让 -图 

<title> 无 标题 文档 </title> * Eb ganm Deme + 

</head> 


<body> | 
<form action="9-3-1.html" method="post" nane="form1"> 


<select name="select"> 
<option valoe-" 素 山 ” selecred="selected">Ñ&llc/oprion> 
<option valoe=" 华 山 "> 华山 </oprics> 

<option va: 恒山 ”> 恒山 </opcic=> 

<option value=" 衡 山 ”> 衡山 </opticn> 

<option value=" > 尘 山 </optice> 

</select> 

</form> 

</body> 

</html> 


OCE 2 = m. Gos Hl -ims 


[ 02 pi A 3 fib iq, HT “CE > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 \9-3-Lhtml” , 


按 F12 键 测试 页 面 效果 。 


提问 : 创建 组 合 框 控件 和 列表 框 控 件 的 注意 事项 有 了 哪些 ? 
答 : 组 合 框 控件 和 列表 框 控件 的 创建 需要 使 用 select 元 素 和 option 元 素 
共同 完成 , 它们 必须 配合 使 用 才能 完成 一 个 组 合 框 控件 或 列表 框 控 件 的 功能 。 
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932 EIESUN 


列表 项 可 以 显示 出 几 条 信息 ， 超 出 信息 量 ， 右 侧 会 出 现 滚动 条 。 
代码 格式 : 


<select name=" 列 表 项 名 称 ”size=" 显 示 的 列表 项 数 " multiple> 
<option value=" IRA" selected> 选 项 显示 内 容 


size 用 于 设置 在 页 面 中 显示 的 最 多 列表 项 数 ， 当 超过 这 个 值 时 会 出 现 
滚动 条 。 


“4 ezszuran m Kamm EE 


f 源 文件 : 源 文件 \ 第 9 章 \9-3-2. html A 操作 视频 : 视频 \ 第 9 章 \9-3-2 swf 


<!doptype html> 
nemi > 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 

</head> 

<body> 

rt seria "9-3-2.html" method="post" name="forml">] 


BERI 


` 


Be a =Y: š oa 


Oh LEE AF, WE S BJ HTML 5 文档， 切换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


<head> 


<meta cnarsec=rutr-5"> 
<title> 天 标题 文 覆 </citle> 
/head> 


m. e mm - w 


(02 PBA RERED, 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 TRE 9 Eo. \9-3-2.html” 
FÈ F12 键 测 试 页 面 效 果 。 


© MDOE ] 


提问 : 如 何 将 单 选 框 转换 为 复 选 框 ? 
答 : 如 果 需 要 将 单 选 框 转换 为 复 选 框 ， 只 需要 在 <select> 标签 中 加 入 
multiple 属性 即 可 。 


9.4 文本 域 标签 textarea 


文本 域 标签 可 以 输入 多 行文 本 ， 和 其 他 表单 对 象 不 一 样 ， 文 本 域 使 用 的 是 textarea 标 
签 而 不 是 input 标签 。 


<textarea name=" 文 本 域名 称 " cols=" 列 数 "” rows=" 行 数 " ></textarea> 


时 文本 域 标签 显示 初始 值 在 textarea 标签 的 开头 和 结尾 之 间 包 含 ， 不 用 
value 属性 。 


mb 实例 121+ 视频 : 创建 意见 框 


— 


* + @ @ 5 O |% /MYA <= a TY'EEPI 

* [na Guwarsa Emm RERE PID @ Fania Vo= Cse Tiea. 

意见 

f 源 文件 : 源 文件 \ 第 9 章 \9-4 html A 操作 视频 : 视频 \ 第 9 章 \9-4. swf 
Dw m+ o a = a <] 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 c/title> 
</head> 

<body> 


<form action="9-4.html" method="post" name="forml"> 


意见 : 


</form> 
| </body> 
Sil /hm> 


[91 P| 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


sama. 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 c/title> 
</head> 


<body> 
<form action="9-4.html" method="post" rame="forml"> 
意见 : 

<textarea nane="textarea" cols="35" rows="5"></textarea> 
</form> 


</body> 
</heml> ET 本 -局 和 本 站 | 下 


[到 站 输入 其 他 代码 ， 执 行 “ 文 件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 9 章 94html ， 
按 F12 键 测试 页 面 效果 。 


e 


提问 : 如 何 为 textarea 设置 自动 换行 ? 
答 : 使 用 textarea 的 warp 属性 即 可 定义 是 否 自 动 换行 ,其 有 两 个 属性 值 ， 
分 别 是 hard 和 soft, hard 表示 自动 硬 回 车 换行 ，soft 表示 自动 软 回 车 换行 。 


9.5 id 标签 


id 标签 给 页 面 中 每 个 表单 元 素 唯一 命名 ， 便 于 程序 识别 。 因 此 在 定义 标签 名 时 最 好 根 
据 其 含义 进行 命名 。 


<textarea name=" 文 本 域名 称 " cols=" 列 数 " rows=" 行 数 " ></textarea> 


m 实例 122+ 视频 : 给 表单 元 素 命名 


Co P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 中 输入 <form> 和 <input> 标签 ， 并 为 这 些 标签 定义 属性 以 及 属性 值 。 


© Tua UP Yi min J 


1 šP j sN 


mastana = 
Pes saa FÈ omo saana 


[02 FP 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 9 章 \9-5html” F12 键 测 试 
页 面 效果 。 


提问 : id 标签 在 表单 中 如 何 应 用 ? 
答 : id 标签 可 以 标示 表单 中 的 文字 字段 、 密 码 域 和 其 他 的 表单 元 素 ， 甚 
至 还 可 以 标签 一 幅 图 像 和 一 个 表格 。 


9.6 表单 的 综合 使 用 
通过 上 面 的 学 习 ， 已 经 知道 了 单个 表单 元 素 的 用 法 ， 下 面 通过 一 个 综合 实例 ， 学 习 综 
合 应 用 表单 和 表单 元 素 。 


[大 实例 123+ 视频 : 创建 点 歌 表单 


IIEiER.— 


f 源 文件 : E OEO henl A 操作 视频 : 视频 \ 第 9 章 \9-6 swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


<body> 

<div id="box"> 
</div> 

</body> 
</html> 


[91 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HIML 5 文档. 切换 到 代码 视图 中 ， 在 
<body> 标签 下 新 建 一 个 名 为 box 的 <div> 标签 。 
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<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style type="text/css"> 
"i 


<title> 无 标题 文档 c/title> 
<style type="text/css"> 
“ 


margin: Opx; 
border:Opx; 
padding: 0px: 


#box( 
height: 643px; 
width:805px; 
background-image:url (images/bg. jpg); 
margin:0 auto; 
overflow: scroll; 


margin:Opx; 
border:0px; 
padding: 0px; 
} 
</style> 
</head> 


) 
</style> 
</head> 


在 —title> 标签 下 新 建 一 个 <style> 标签， 并 新 建 一 个 通配符 为 * 的 CSS 样式 。 为 id 名 称 
为 box 的 <div> 标签 建立 一 个 CSS 样式 。 


22 <body> 

23 <div id="box"> 

24 <div id="bia"> 
25 </div> 

pa </div> 

PARE </body> 

2 </html> 


试 页 面 效果 。 在 id 名 称 为 box 的 <div> 标签 内 新 建 一 个 id 名 称 为 box 的 <div> 标签 。 


#box( 3 
height: 643px; #bia( 
width:805px; height:250px; 
background-image:url (images/bg.jpg); width:500px; 
margin:0 auto; an E 
overflow:scroll; margin-top:230px; 

} i : " 

margin-left:150px 

#bia( g PE: 
height:250px; } 
width: 500px; .vif 
margin-top:230px; 
margin-left:150px; border:#000 solid 1px; 

) } 

</style> 

</head> </style> 


[ 04 为 id 名 称 为 bia 的 <div> 标签 建立 CSS 样式 , 建立 一 个 名 为 .yi 类 CSS 样式 。 


<bedy> 
<a 1d="pox"> 


[ 05 P] 在 id 名 称 为 bia 的 <div> 标签 内 新 建 一 个 6 行 2 列 的 <table> 标签 。 在 第 一 行 第 一 列 
输入 文字 ， 在 第 一 行 第 二 列 新 建文 本 标签 元 素 ， 应 用 .yi 类 CSS 样式 。 
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[06 站 新 建 其 他 表单 元 素 ， 执 行 “ 文 件 > 保存 " 命令， 将 其 保存 为 “ 源 文件 \ 第 9 章 9.6html”， 
按 Fl2 键 测试 页 面 效果 。 


wW 提问 : 一 个 表单 至 少 由 哪 几 个 部 分 组 成 ? 
答 : 一 个 表单 至 少 有 3 个 基本 组 成 部 分 ， 分 别 是 表单 标签 、 表 单 域 和 表 
单 按钮 


9.7 本 章 小 结 


使 用 表单 可 以 帮助 互联 网 服务 器 从 用 户 处 收集 信息 ， 例 如 手机 用 户 资料 和 获取 用 户 订 
单 ,也 可 以 实现 搜索 接口 。 在 互联 网 上 存在 大 量 的 表单 , 要 求 输入 汉字 , 让 浏览 者 进行 选择 。 
本 章 主要 介绍 了 网 页 中 各 种 表单 元 素 的 使 用 方法 ， 希 望 用 户 可 以 认真 学 习 并 掌握 。 


第 10 章 离线 网 络 应 用 


HTML 5 引入 了 应 用 程序 缓存 ， 这 意味 着 Web 应 用 
可 进行 缓存 ， 并 可 在 没有 互联 网 连接 时 进行 访问 。 应 用 
程序 缓存 可 以 将 HIML 相关 的 文件 都 缓存 在 客户 端 ， 如 
CSS 文件 、js 文件 、 图 片 、 视 频 等 。 应 用 程序 缓存 为 应 月 
带 来 3 个 优势 。 
0) 离线 浏览 : 用 户 可 在 应 用 离线 时 使 用 它们 。 
(2) 速度 : 已 缓存 资源 加 载 得 更 快 。 
(3) 减少 服务 器 负载 : 浏览 器 将 只 从 服务 器 下 载 更 
新 过 或 更 改过 的 资源 。 这 样 当 用 户 无 法 上 网 时 ， 仍 然 可 以 
使 用 这 些 文件 完成 一 些 功 能 。 
要 应 用 程序 缓存 ， 需 要 下 面 3 个 步骤 。 
(1) 配置 服务 器 manifest 文件 的 MIME 类 型 。 
(2) 编写 manifest 文件 。 
(3) 在 页 面 的 html 元 素 的 manifest 属性 中 引用 写 好 
的 manifest 文件 。 


10.1 实现 文件 缓存 = 

要 实现 文件 缓存 ， 可 以 使 用 根 节点 html 3 3 B9 
manifest 属性 ， 该 属性 引用 了 一 个 清单 文件 ， 清 单 文件 是 
一 个 文本 文件 ， 使 用 UTF-8 编码 ， 它 列 出 了 离线 访问 应 
用 时 所 需 缓存 的 文件 清单 。 


有 无 标题 - 记事 本 -+E tsj 


| 20) S86 MAO SEV RH 
CACHE MANIFEST 


5 
1 
b 
b 


网 页 一 旦 定义 html 元 素 的 manifest 属性 ， 该 网 页 就 
会 被 缓存 。 基 本 格式 如 下 : 


<html manifest="test.manifest"> 


</html> 


离线 应 用 与 网 页 引用 的 资源 


创建 一 个 网 页 ， 并 创建 网 页 中 要 引用 的 资源 ， 包 括 图 
片 文件 、CSS 文件 、js 文件 等 。 


: 


V) 了 解 什么 是 离线 应 用 


掌握 缓存 文件 的 使 用 
了 解 什么 是 引用 资源 
掌握 创建 清单 文件 的 方法 


了 解 缓存 清单 文件 
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(mD 实例 124+ 视频 : 测试 离线 应 用 | 


f 源 文件 : sa Na 1. html A 操作 视频 : 视频 \ 第 10 章 \10-1-1. swf 


XHA SREO ELO FEV EMH 
| CACHE MANIFEST 


CACHE: 
101101. html 
images/54. jpg 


(01 P| 在 Windows 操作 系统 中 , 单 击 “开始 ” 按钮， 选择 “所 有 程序 > 附件 > 记事 本 ”命令 ， 
打开 “记事 本 ”程序 ， 输 入 相应 HTML 代码 。 


Gan “文件 > 保存 ” 命令 ， 将 其 保存 为 “ 源 文件 \ 第 10 这 101102 xU” 。 执行 x 
> 打开” 命令 , 将 “素材 \ 第 10 章 \101101.html” 文 件 打 开 。 


[oa >) 输 入 相应 代码 。 执行 “ 文件 > 保存 ” 命令 ， BERTS ° ' 源 文件 \ 第 10 EZ AlO-1-I. 
html”。 双 击 打 开 ， 在 离线 情况 下 查看 效果 。 
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< 提问 : manifest 属性 值 有 什么 作用 ? 
答 : manifest 属性 值 用 于 定义 值 的 文件 路 径 ， 可 以 使 用 绝对 路 径 或 相对 
路 径 ， 甚 至 可 以 引用 到 其 他 的 服务 器 上 的 manifest 文件 。 


10.1.2 创 建 清单 文件 


html 元 素 的 manifest 属性 已 经 指明 了 清单 文件 : browsermanifest。 代 码 格式 如 下 : 
CACHE MANIFEST 


CACHE: 
12345.html 
browser.CSS 
browser.js 
images/123.jpg 


10.1.3 更 新 离线 储存 


如 果 要 更 新 离线 存储 的 文件 ， 就 必须 更 新 manifest 文件 ， 不 然 即 使 存储 的 文件 发 生 
了 更 改 ， 也 不 会 有 任何 作用 。 例 如 中 间 更 改 了 js 文件 改变 内 容 的 呈现 ， 这 时 如 果 不 更 改 
manifest 文件 ， 那 么 新 的 文件 根本 不 会 应 用 到 网 页 ， 即 使 不 断 单 击 浏览 器 的 刷新 按钮 ， 也 
不 会 有 任何 改变 。 

清除 浏览 器 的 manifest 文件 ， 就 会 重新 下 载 该 文件 ， 就 可 以 实现 重建 离线 存储 。 使 用 
浏览 器 的 “清除 浏览 器 数据 ”功能 就 可 以 将 manifest 文件 清除 。 


| 10.2 缓存 清单 文件 
缓存 清单 文件 一 般 以 扩展 名 .manifest 的 形式 存在 ， 这 个 文件 就 是 一 个 文本 文件 ， 如 下 
是 一 个 标准 的 缓存 文件 。 


CACHE MANIFEST 
# 上 一 行星 必须 书写 的 。 


CACHE : 
12345.html 
images/123.jpg 


NETWORK : 
login.php 


FALLBACK : 
/12345.php /123.html 


第 一 行 的 CACHE MANIFEST 是 必须 书写 的 ， 用 来 声明 该 文件 是 一 个 缓存 清单 文件 。 


EE 
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CACHE MANIFEST 下 面 应 该 是 一 个 空 行 ， 或 是 一 行 注释 ， 或 是 下 面 这 三 个 关键 字 之 一 : 
CACHE: 、NETWORK: , FALLBACK: 


这 三 个 关键 字 代 表 三 个 功能 段 ， 这 些 段 没有 先后 顺序 ， 而 且 在 同一 个 manifest 中 可 以 
多 次 出 现 ， 并 且 FALLBACK: 和 NETWORK: 是 可 选 的 。 


10.2.1 定义 缓存 文件 | 


要 缓存 的 文件 使 用 CACHE: 关键 字 声 明 ， 代 码 格式 如 下 : 


CACHE MANIFEST 


CACHE: 

12345 .html 

style.css 

images/123.png 

也 可 以 不 使 用 关键 字 CACHE: 直接 紧 跟 声 明 写 要 缓存 的 文件 ， 如 下 面 的 格式 与 前 面 
实现 相同 的 效果 : 


CACHE MANIFEST 


12345.html 
style.css 
images/123.png 


如 果 包 含 其 他 两 段 ， 那 么 就 必须 使 用 关键 字 CACHE: ， 如 下 两 图 所 示 : 


CACHE MANIFEST CACHE MANIFEST 
WEIR 12345.html 

Sephp style.css 

CACHE : images/123.png 
12345.html 

style.css NETWORK : 
images/123.png 456.php 

FALLBACK : FALLBACK : 
/12345.php /789.html /12345.php /789.html 


10.2.2 REepw;Kal 


FALLBACK: 定义 不 能 获取 指定 文件 时 的 备 抵 机 制 ， 它 定义 一 个 重 定 向 文件 ， 当 无 法 
访问 一 个 文件 时 ， 它 就 重 定向 到 另 一 个 文件 。 每 一 行 都 会 包括 两 个 URI， 第 一 个 是 指 资源 
文件 URI， 第 二 个 是 指 回调 页 面 URI, 

如 下 面 的 代码 ， 当 123.php、456php 无 法 访问 时 ， 就 会 用 789.html 代替 ， 文 件 之 间 使 
用 空格 分 隔 : 

FALLBACK: 


/123.php /789.html 
/456.php /789.html 


如 下 面 的 代码 就 表示 如 果 用 户 离线 时 ， 将 所 有 文件 都 重 定向 到 789.html 代替 : 


— o +< 
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FALLBACK: 
7: /offline.html 


10.2.3 


NETWORK: 定义 白 名 单 ， 在 它 之 后 的 文件 是 必须 访问 网 络 的 ， 例 如 要 验证 用 户 登 录 
就 必须 要 连接 网 络 才 行 , 这 个 时 候 就 可 以 将 123.php 设置 为 必须 访问 的 网 络 , 不 缓存 该 文件 ， 
代码 格式 如 下 : 

NETWORK: 

/123.php 

此 段 中 可 以 使 用 通配符 * 表示 所 有 资源 ， 如 下 面 的 代码 就 表示 所 有 的 资源 都 必须 通过 
网 络 连 接 才能 访问 ， 所 有 的 资源 都 不 会 被 缓存 : 

NETWORK: 

当 FALLBACK: 和 NETWORK: 配合 使 用 时 ， 就 表示 因为 所 有 文件 都 不 缓存 ， 所 以 
当 用 户 离线 时 ， 都 重 定 向 到 另 一 个 文件 。 如 下 所 示 都 重 定向 到 文件 789 html: 


CACHE MANIFEST 
FALLBACK: 
Z. /789.html 


NETWORK: 
* 


10.2.4 


缓存 清单 使 用 # 作为 注释 声明 符 ， 在 # 之 前 可 以 有 空格 ， 但 是 只 能 包含 单行 注释 。 
注释 是 用 来 描述 缓存 的 功能 ， 但 是 它 不 止 这 一 个 作用 ， 用 户 还 可 以 用 它 来 定义 Web 应 
用 的 版 本 ， 一 般 都 是 用 在 第 一 行 注释 ， 代 码 格式 如 下 : 


CACHE MANIFEST 
# offline NotePad v1l.1 


Web 应 用 的 缓存 只 在 清单 文件 被 修改 时 才 会 被 更 新 ， 如 果 只 是 修改 了 被 缓存 的 文件 
那么 客户 端 本 地 的 缓存 还 是 不 会 被 更 新 ， 这 时 用 户 可 以 通过 修改 manifest 文件 来 告诉 浏览 
器 需要 更 新 缓存 了 。 

利用 这 个 通过 修改 注释 中 的 版 本 号 就 可 以 实现 。 或 者 在 注释 中 定义 一 个 修改 日 期 也 可 
以 实现 与 版 本 号 相同 的 功能 ， 代 码 格式 如 下 : 

CACHE MANIFEST 

# offline NotePad modified by 09/24/2012 


这 样 写 的 好 处 如 下 : 

(1) 可 以 明确 地 了 解 离 线 Web 应 用 的 版 本 。 

(2) 通过 修改 这 个 版 本 号 或 日 期 可 以 轻易 地 通知 浏览 器 更 新 。 
(3) 可 以 配合 JavaScript 程序 来 完成 缓存 更 新 。 
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本 章 主要 为 用 户 介绍 了 将 HTML 相关 文件 缓存 在 客户 端的 方法 ， 缓 存 的 内 容 可 以 包含 


CSS 文件 、js 文件 、 图 片 以 及 视频 等 网 页 内 容 。 这 样 客 户 端 无 法 上 网 时 ， 仍 然 可 以 使 用 网 
页 中 的 某 些 功能 。 


< == . 
第 11 章 JavaScrpt 脚 本 基础 

前 面 介 绍 的 HTML 只 能 制作 出 静态 的 网 页 ， 为 了 能 
够 独立 完成 与 客户 端 动态 交互 的 网 页 设计 ， 同 时 避 开 复杂 
的 编程 方法 ，Netscape 公司 开发 出 了 JavaScript 语言 。 


| 11.1 JavaScript 简介 


JavaScript 是 由 Java 集成 而 来 ， 它 是 面向 对 象 的 程序 
设计 语言 ， 包 含 变 量 和 函数 两 个 部 分 ， 也 称 属 性 和 方法 。 

JavaScript 是 一 种 嵌入 到 HTML 文件 中 的 描述 性 语 
言 ， 它 并 不 编译 产生 机 器 代码 ， 只 是 由 浏览 器 的 解释 器 将 
其 动态 地 处 理 成 可 执行 代码 。 但 对 于 它 的 预期 用 途 而 言 ， 
JavaScript 的 功能 已 经 足够 大 了 。 


实例 125+ 视频 : JavaScript 的 基本 用 法 


f 源 文件 : 第 11 章 \11-1.html A 操作 视频 : 第 11 章 \11-1. swf 


01 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 
文档 ， 在 <body> 标签 中 输入 <script> 标签 。 


02 PP] 在 <script> 标签 中 输入 JavaScript 脚本 ， 执 行 “文件 > 
保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 11 章 \11-1html , 
按 F12 键 测试 页 面 效果 。 


回 
加 


B 


| A) 


认识 JavaScript 

了 解 JavaScript 基本 语法 

了 解 什么 是 函数 

掌握 JavaScript 事件 处 理 方法 


了 解 浏览 器 的 内 部 对 象 
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W 提问 : 为 什么 有 些 时 候 js 脚本 代码 不 起 作用 ? 
答 : 当 使 用 XML 语法 时 ，js 元 素 的 内 容 可 能 与 XML 1.0 规范 发 生 冲突 。 
例如 在 元 素 内 容 中 不 能 出 现 左 尖 括 号 ， 但 是 在 js 代码 中 是 一 种 运算 符 。 


@ JavaScript 脚本 的 组 成 
JavaScript 脚本 分 为 三 部 分 。 第 一 部 分 是 script language="JavaScript"， 它 告诉 浏览 器 下 面 开 
始 是 JavaScript 脚本 。 开 头 <scripf 标记 ， 表 示 这 是 一 个 脚本 的 开始 。 在 标记 里 使 用 language 指 
明 使 用 哪 一 种 脚本 语言 ， 除 了 JavaScript 脚本 ， 还 有 VBScript 等 脚本 。 第 二 部 分 就 是 JavaScript 
脚本 , 用 于 创建 对 象 、 定 义 函 数 或 是 直接 执行 某 一 功能 。 第 三 部 分 是 </script>, 表示 脚本 到 此 结束 。 
JavaScript 能 够 将 网 页 中 的 文本 、 图 形 、 声 音 和 动画 等 各 种 媒体 形式 捆绑 在 一 起 ， 形 成 
一 个 信息 源 。 
@ JavaScript 的 语言 特点 
JavaScript 采用 小 程序 段 的 方式 编程 ， 开 发 过 程 非常 简单 。 
JavaScript 是 动态 的 , 它 可 以 直接 对 用 户 或 客户 的 输入 做 出 响应 , 不 经 过 Web 服务 程序 。 
JavaScript 是 一 种 安全 性 语言 ， 它 不 允许 访问 本 地 硬盘 ， 只 能 通过 浏览 器 实现 信息 浏览 
或 动态 交互 。 


e@ JavaScript 具有 跨 平台 性 。 它 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 ， 
所 以 用 JavaScript 代码 编写 的 实例 可 以 在 任何 操作 系统 上 运行 。 


11.2 JavaScript 基本 语法 


任何 一 种 语言 都 有 自己 的 基本 语法 ，JavaScript 作为 一 种 语言 ， 有 自己 的 变量 、 常 量 、 
表达 式 、 运 算 符 以 及 程序 的 基本 框架 ， 下 面 一 起 学 习 JavaScript 基本 语法 。 


常量 的 值 是 不 能 改变 的 ， 有 以 下 几 种 类 型 : 

e 整 型 常量 : 用 十 六 进 制 、 八 进 制 或 十 进 制 表 示 其 值 。 

e 实 型 常量 : 用 整数 部 分 加 小 数 部 分 表示 ， 如 3.14、5.3; 可 以 使 用 科学 或 标准 方法 表 
示 ， 如 5E7、4e5 等 。 

@ 字符 型 常量 : 用 单 引 号 () 或 (") 括 起 来 的 一 个 或 几 个 字符 。 

@ 空 值 : 用 null 表 示 ， 表 示 什 么 也 没有 。 

@ 特殊 字符 : 用 反 和 斜 枉 (/) 开头 的 不 可 显示 的 特殊 字符 。 

@ 布尔 值 : 用 true 或 false 表 示 ， 表 示 真 或 假 。 


T 
变量 是 数据 的 存 取 容 器 ， 值 在 程序 运行 期 间 是 可 以 改变 的 。 在 使 用 变量 时 ， 最 好 对 其 
进行 声明 ， 变 量 的 声明 主要 就 是 明确 变量 的 名 称 、 变 量 的 类 型 以 及 变量 的 作用 域 。 
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用 户 可 以 对 变量 名 进行 自 定义 ， 但 要 注意 以 下 几 点 : 


(1) 只 能 由 字母 、 数 字 和 下 划 线 “ ”组 成 ， 以 字母 开头 ， 除 此 之 外 不 能 有 空格 和 其 他 符号 。 


(2) 不 能 使 用 JavaScript 中 的 关键 字 ， 所 谓 关 键 字 就 是 JavaScript 中 已 经 定义 好 并 有 


一 定 用 途 的 字符 ， 如 int. true 等 。 
(3) 命名 时 最 好 把 变量 的 意义 与 其 代表 的 意思 对 应 起 来 ， 以 免 出 现 错误 。 
在 JavaScript 中 声明 变量 使 用 var 关键 字 。 
var cityl; 
定义 了 变量 就 要 对 其 赋值 ， 用 赋值 符 “=” 完 成 。 
var cityl=" 北 京 "; 
变量 的 值 可 以 是 数值 、 字 符 、 布 尔 类 型 (true 或 false) 或 空 值 。 


在 JavaScript 中 有 全 局 变量 和 局 部 变量 。 全 局 变量 是 定义 在 所 有 函数 
体 之 外 ， 其 作用 范围 是 整个 函数 。 而 局 部 变量 是 定义 在 函数 体 之 内 ， 只 对 部 
分 函数 是 有 效 的 ， 而 对 其 他 函数 则 是 无 效 的 。 


1123 


表达 式 是 由 数字 、 算 符 、 括 号 和 变量 等 元 素 组 成 ， 并 且 能 求 得 数值 的 组 合 。 


在 定义 完 变量 后 ， 表 达 式 可 以 对 其 进行 赋值 、 改 变 和 计算 等 一 系列 操作 。 表 达 式 中 的 


一 大 部 分 是 在 做 运算 符 处 理 。 


n24 


运算 符 用 于 执行 程序 代码 运算 ， 会 针对 一 个 以 上 操作 数 项 目 来 进行 运算 。JavaScript 


中 包含 算术 运算 符 、 比 较 运算 符 和 逻辑 运算 符 。 
算术 运算 符 可 以 进行 加 、 减 等 数学 运算 。 
比较 运算 符 用 于 比较 表达 式 的 值 ， 并 返回 一 个 布尔 值 。 


减 > EF 
š R <= 小 于 等 于 
/ 除 > 大 于 等 于 
% 取 模 = 等 于 
+ 递 加 1 上 = 不 等 于 
递减 1 
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逻辑 运算 符 用 于 比较 两 个 布尔 值 ( 真 或 假 ) ， 然 后 返回 一 个 布尔 值 ， 用 于 判断 真 或 假 ， 
对 真 假 进行 运算 ， 包 括 &&、|| 和 ! ， 优 先 级 : ! >&&>||。 


逻辑 运算 符 描述 
逻辑 与 ， 在 形式 A&&B 中 ， 只 有 当 两 个 条 件 A 和 B 都 成 立时 ， 
整个 表达 式 值 才 为 真 true 
| 逻辑 或 ， 在 形式 AJB 中 ， 只 要 两 个 条 件 A 和 B 中 有 一 个 成 立 ， 
整个 表达 式 值 就 为 true 
i 逻辑 非 ， 在 !A 中 ， 当 A 成 立时 ， 表 达 式 的 值 为 false; 4 A 
i 不 成 立时 ， 表 达 式 的 值 为 true 


11.2.5 基本 语句 


在 JavaScript 中 主要 有 两 种 基本 语句 ， 一 种 是 循环 语句 ， 如 for. while; 一 种 是 条 件 语 
句 ， 如 这 等 。 其 他 还 有 一 些 程序 控制 语句 。 
Ə if…else 语句 

if…else 用 于 改变 语句 的 执行 顺序 ， 执 行 让 后 的 语句 或 者 else 后 的 语句 。 

代码 格式 : 


if (条 件 ) 
{执行 语句 1} 
else {执行 语句 2} 


+ e “mana xz a m. G 4 1 D - m + 


f 源 文件 : 源 文件 \ 第 11 章 \11-2-5-1. html A 操作 视频 : 视频 \ 第 11 章 \11-2-5-1. swf 


CE TE 


<!doctype html> 
<hrml> 

<head> 

<meta charset="utf-s"> 
<cicle> 交 葵 显 示 图 片 </cicle> 
</nead> 

<body> 

En <script language="javascript"> 
kr oe L T 3 </script> 

Ë hs š yasaq 

= </hrml> 


Lo PF] 执 行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 <script> 标签 ， 并 设置 language 属性 值 为 JavaScript。 


— o o 
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< e; 


B Genn- ms + 


02 P| 在 刚刚 输入 的 <script> 标签 中 输入 JavaScript 脚本 函数 ， 执 行 “ 文 件 > 保存” 命令， 
将 其 保存 为 “ 源 文件 \ 第 11 章 \11-2-5-1.html”， 按 F12 键 测试 页 面 效 果 。 


提问 : JavaScript 如 何 插 入 到 HTML 中 ? 

答 : JavaScript 可 以 出 现在 HTML 文档 中 的 任何 位 置 ， 甚 至 在 <html> 
标签 上 方 插入 也 可 以 。 但 是 在 输入 JavaScript 脚本 函数 之 前 ， 用 户 需 要 将 
JavaScript 脚本 函数 包含 在 <script>…</script> 标记 中 。 


@ for 语句 
for 语句 的 作用 是 重复 执行 语句 ， 直 到 循环 条 件 为 False 为 止 。 
代码 格式 : 
for (初始 化 ; 条 件 ; 增 量 ) 


时 for 语句 初始 化 参数 是 循环 的 初 值 ， 条 件 是 循环 结束 ， 增 量 是 循环 方式 。 
3 个 主要 语句 之 间 ， 必 须 使 用 分 号 G) 分 隔 。 


m 实例 127+ 视频 : 循环 输出 文字 


sees. am: 


* j= erms owo: cms. ed 
东 凶 对折 们 的 服务 提出 宝 : 


f 源 文件 : 源 文件 \ 第 11 章 \11-2-5-2. html SÀ) 操作 视频 : 视频 \ 第 11 章 \11-2-5-2. swf 


EE 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 循 环 显示 文字 </title> 
</head> 


<body> 

<script language="javascript"> 
</script> 

</body> 

</html> 


PT “XE > 新 建 ”命令 ， 新 建 一 个 空 自 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 <script> 标签 ， 并 设置 language 属性 值 为 JavaScript, 


<meta charset="utr-s"> 

<cltley 企 环 显示 文字 </cicley> 

</head> 

<body> 

<script language="javascript"> 
for(p=1:p<=7;p++| 

<font size="+p+">3Ejicpryc/font size="+p+">"); 


02 PJ <script> 标签 中 输入 for 循环 脚本 函数 。 执 行 文件 保存” 命令 ， 将 其 保存 为 “ 源 
文件 \ 第 11 章 \11-2-5-2.html”， 按 Fl12 键 测试 页 面 效 果 。 


IY satan, for 语句 后 会 报错 ? 

多 28: 在 for 语句 中 ，for() 小 括号 内 的 三 个 参数 缺 一 不 可 。 即 使 用 户 在 括 
号 内 不 写 参数 ， 还 是 需要 在 for 后 面 的 括号 内 输入 分 号 ， 例 如 fG), EN 
软件 就 会 对 语句 进行 报错 。 


@ switch 语句 

switch 语句 是 多 分 支 选择 语句 ， 执 行 表 达 式 的 值 与 条 件 值 相 匹配 那 一 支 。 它 所 有 支 都 
是 并 列 的 。 程序 执行 时 , 由 第 一 支 开始 查找 , 如 果 相 匹配 , 执行 其 后 的 块 , 接着 执行 第 2 分 支 、 
第 3 分 支 ……， 如 果 不 匹配 ， 则 查找 下 一 个 分 支 是 否 匹 配 。 

代码 格式 : 

switch (表达 式 ) 

2 条 件 1: 

语句 块 1 

case 条 件 2: 


语句 块 2 
default 
语句 块 N 
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® 一 般 每 个 case 语句 都 以 break 结尾 ， 这 样 程序 执行 到 break 后 就 跳出 


switch 语句 。 


@ while 语句 
while 语句 也 是 循环 语句 ， 当 条 件 为 真 时 ， 重 复 循 环 ， 否 则 退出 循环 。 
代码 格式 : 
while (条 件 ) { 


语句 集 ; 
) 
@ break 语句 
break 语句 用 于 终止 for、switch 或 while 语句 的 执行 ， 程 序 执行 break 语句 的 后 续 语句 。 
该 语句 不 能 用 于 站 语句 中 ， 除 非 f 属 于 循环 内 部 的 一 部 分 。 
代码 格式 : 
break; 
@ continue 语句 
continue 语句 只 能 用 在 循环 结构 中 。 条 件 为 真 ， 执 行 continue 语句 ， 程 序 跳 过 循环 体 
中 位 于 该 语句 后 的 所 有 语句 ， 提 前 结束 本 次 循环 周期 并 开始 下 一 个 循环 周期 。 
代码 格式 : 


continue; 


11.2.6 


函数 是 拥有 名 称 等 一 系列 JavaScript 语句 的 有 效 组 合 。 只 要 这 个 函数 被 调用 ， 这 一 系 
列 语句 就 会 被 执行 。 一 个 函数 可 以 有 自己 的 参数 ， 并 可 以 在 函数 内 使 用 参数 。 
代码 格式 : 


function 函 数 名 称 (参数 表 ) 
{ 


函数 执行 部 分 
} 


11.3 JavaScript 事件 


JavaScript 是 基于 对 象 的 语言 ， 其 基本 特征 是 采用 事件 驱动 。 一 般 鼠 标 或 键盘 的 动作 
称 为 事件 ， 由 事件 引发 的 一 连 串 程序 执行 的 动作 ， 称 为 事件 驱动 。 

事件 是 可 以 被 JavaScript 侦 测 到 的 行为 。 网 页 中 的 每 个 元 素 都 可 以 产生 某 些 可 以 触发 
JavaScript 函数 的 事件 ， 而 对 事件 进行 处 理 的 程序 或 函数 ， 则 称 为 事件 处 理 程 序 。 


KEA onClick 事件 


单 击 鼠 标 时 ， 产 生 onClick 事件 ， 同 时 onClick 指定 的 事件 处 理 程 序 或 代码 将 被 调用 执 
行 ， 这 是 最 常用 的 事件 。 
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mb 实例 128+ 视频 : 全 屏 显 示 图 像 


= am 


Sas CUE: 
Pas ye: </htmly 


[0T 了 执行 “文件 > 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 <div> 标签 。 


html> 


[ 02 Pp 添加 一 个 按钮 ， 并 添加 onClick 事件 ， 全 屏 显 示 窗口 ， 添 加 另 一 个 按钮 ， 关 闭 窗口 。 


$ 
3 E 


[03 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 11 章 \11-3-1.html”， 按 F12 键 
测试 页 面 效 果 。 单 击 “ 全 屏 ” 按 钮 ， 显 示 全 屏 页 面 效 果 。 
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提问 : input 标签 有 什么 作用 ? 
答 : 对 于 大 量 普通 的 表单 元 素 ， 都 可 以 使 用 <input> 标签 来 进行 定义 ， 
其 中 包括 文本 字段 、 多 选 列表 和 可 单 击 的 图 像 和 提交 按钮 等 。 


onChange 是 一 个 与 表单 相关 的 事件 ， 在 text 或 textarea 表单 元 素 中 输入 字符 值 改变 时 
发 生 该 事件 ， 在 select 表格 中 的 一 个 选项 状态 改变 后 也 会 引发 该 事件 。 


mb 实例 129+ 视频 : 弹出 提示 信息 


y TUDI”) TEE 


[a ONL. eegz. ew maan REE e. B go m - wx + = = = du 
AiE: 源 文件 \ 第 11 章 \11-3-2. html A 操作 视频 : 视频 \ 第 11 章 \11-3-2. swf 
pr B Ce | 项” o är 


(A (G) E 插入 (1】 修改 M) sO) SAO 站 点 ( 
hm 


B)al] 设计 mna Q O 00 pF 人 ss 


L S= 


[65 执行 “文件 > 新 建 ” 命 令 ， 新 建 一 个 空 自 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 
body> 标签 下 输入 内 容 。 


html x 


Men n 
Irale mam (Q. Ç. LC 标 


<meta charset="utf-8"> 
<title> 竹 未 信息 </title> 
</head> 


<textarea name="textarea" cois-"50" rows="5" 
onchange=alert (欢迎 提出 意见 ") ></textarea> 

</body> | 
</html> IE r m- 2 @ r m - mx + 


[ 02 P| 输入 其 他 内 容 ， 执 行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-2. 
html”， 按 F12 键 测 试 页 面 效 果 。 
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提问 : 在 函数 中 可 以 输入 多 个 JavaScript 语句 吗 ? 
答 : 使 用 事件 处 理 方法 的 代码 可 读 性 比较 强 ， 并 且 在 函数 中 可 以 输入 多 
JavaScript 语句 ， 以 便 完 成 一 些 功 能 较为 复杂 的 程序 。 


个 


onSelect 事件 是 当 文 本 框 中 的 内 容 被 选中 时 所 发 生 的 事件 ， 在 文本 框 中 内 容 被 选中 且 
需要 执行 某 些 程序 时 可 以 使 用 该 事件 。 


=b 实例 130+ 视频 : 弹出 提示 信息 


0 | BE LR S. 国 - 口 和 1 QD - mx + 


fi seso 源 文件 \ 第 11 ss html A 操作 视频 : 视频 \ 第 11 章 \11-3-3, swf 


rx 


A 
Jøalm am (Q. Q. L m. 天 


1°] 


aiis: 
aj 


EE CC TE 


REM: >A4 bieti- ta , BIS ismi 8 BW, 
“esas ram esa 所 本 的 乱入 一 条 

天 将 由 本 人 请 客 到 五 星 织 酒店 _ 乔 入 家 旋 饭 ! 

Z epwamumit, we +a kK.RXARSmh Ù, Bh </br> 


COPR “t> 新 建 ” 命 令 ， 新 建 一 个 空白 的 HIML 5 文档。 切换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


cpri rh wt=srass, A 6k. </or> 


= anasx=1 7=1ue-" 答 入 人 的 评价 ”ai=e-16 
pe 
caiv/> 


</boay> KES ss Ç AIE 
</numa> |a e: = m- 2 e n D E 


[ 02 PF 输入 其 他 内 容 ， 执 行 “文件 > 保存 ”命令 ， 将 其 保存 为 a O '1 
按 Fl12 键 测试 页 面 效果 。 


EE 
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提问 : 为 什么 制作 出 的 页 面 在 不 同 的 计算 机 上 有 不 同 的 效果 ? 

答 : 用 户 所 看 到 的 页 面 内 容 取决 于 计算 机 所 使 用 的 浏览 器 版 本 ， 随 着 济 
览 器 版 本 不 断 增多 ， 又 分 别 应 用 于 不 同 的 操作 平台 ， 所 以 也 导致 页 面 在 不 同 
的 浏览 器 中 有 着 不 同 的 效果 。 


onFocus 事件 是 当 单 击 表 单元 素 即 焦点 或 光标 在 表单 元 素 上 时 产生 的 事件 ， 当 表单 
元 素 获得 焦点 时 ， 需 要 实现 某 效果 可 以 使 用 该 事件 。 


大 实例 131+ 视频 : 选择 课程 


A 操作 视频 ; 视频 \ 第 11 章 \11-3-4 swf 


apma] 设计 “实时 视图 (Q. GL 00 p Fl C 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 选 择 所 教 的 课程 </title> 
</head> 


<body> 
选择 所 教 的 课程 : <bz/> 


<form name="formi" method="post” action="®> 


LOL PBB “Xk > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档， 切换 到 代码 视图 中 ， 在 
<body> 标签 下 输入 内 容 。 


ra "RadioGroupi” value="i83X" 
TARERE o). "> 语文 


"value=" 劳 动 * 


[ 02 输入 其 他 内 容 ， 执 行 “ 文 件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-4html , 
按 Fl2 键 测试 页 面 效果 。 
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Ey 


r 


提问 : JavaScript 可 以 识别 浏览 器 吗 ? 
答 : JavaScript 可 以 识别 用 户 使 用 的 是 何 种 内 核 的 浏览 器 ， 然 后 将 会 自 
动 引 导 用 户 到 所 支持 的 浏览 器 网 页 中 。 


KEX onLoad 事件 


onLoad 事件 是 当 加 载 网 页 文档 时 产生 的 事件 ， 页 面 加 载 时 需要 显示 某 些 信息 或 者 需要 
某 些 数据 初始 化 可 以 使 用 该 事件 。 


mb 实例 132+ 视频 : 使 用 onLoad 事件 


FRR “ 


sss 


f 源 文件 : 源 文件 \ 第 11 章 \11-3-5. html A 操作 视频 : 视频 \ 第 11 章 \11-3-5, swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<tıtie>onLoaaPft</tıtie> 
<script type="text/JavaScript"> 


function MM_popurMsg (msg) ( 
alert (msg); 
1 


</script>> 
</head> 


<body > 


| </body> 
Ss </html> 


01 > 


执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 


<body> 标签 下 输入 内 容 。 


02 p 


| <!doctype html> 
| <hrm> 


"text/JavaScript"> 


[function MM_popupMsg (mag) ( 
alert (msg); 

p 

|//—_ 

[</script> 

</head> 


[<body onLoad-"MM_popupMsg ( "欢迎 光临 专业 网 站 设计 店 ") "> 
| <img src-"images/113501.jpg" width="600px" height="600px"> 


</html> 


html” 


输入 其 他 内 容 ， 执 行 “ 文 件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文 件 \ 第 11 章 \11-3-5. 
， 按 Fl12 键 测 试 页 面 效果 。 
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£) 


onLoad 事件 还 有 一 个 作用 是 可 检测 cookie 的 值 ， 并 用 一 个 变量 为 其 赋 
值 ， 使 其 可 以 被 源 代 码 使 用 。 


«3 


G Ei): 事件 是 如 何 运作 的 ? 


答 : 事件 通过 发 送 消息 的 方式 来 触发 事件 处 理 器 ， 然 后 对 用 户 的 动作 做 
出 响应 事件 ， 从 而 达到 交互 的 目的 。 


KER onUnLoad 事件 


onUnLoad 事件 是 当 退 出 网 页 时 引发 事件 ， 在 事件 中 可 更 新 cookie 状态 ， 保 存 数 据 和 
清除 不 需要 的 变量 。 


sD 实例 133+ 视频 : 使 用 onUnLoad 事件 


kanl -= L i 
fR: 源 文件 \ 第 11 章 \11-3-6. html A 操作 视频 : 视频 \ 第 11 章 \11-3-6. swf 


function MM _popurMsg (nsg) | 
ect (msg); 


[01 > 执行 “文件 > 新建 ”命令 ， 
入 <script> 标签 ， 并 定义 JavaScript 脚本 语言 ， 继 续 编辑 <body> 标签 以 及 其 中 的 内 容 。 


sc </mi> 


新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 输 


—@— 


re and deive 


== 
mm m. G e s 


[ 02 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-6.html”， 按 F12 #Ë 
测试 页 面 效 果 ， 关 闭 浏览 器 ， 弹 出 “关闭 网 站 ”信息 对 话 框 。 
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提问 : HTML 文档 本 身 具 有 处 理事 件 的 能 力 吗 ? 

答 : HTML 本 身 也 具有 一 些 事件 属性 的 处 理 能 力 ， 并 且 这 些 事件 处 理 器 
可 以 绑 定 为 文本 的 一 部 分 ， 但 是 其 代码 一 般 较 为 短小 ， 功 能 也 非常 弱小 ， 只 
能 适用 于 一 些 简单 的 数据 验证 。 


11.3.7 onBlur 事件 
onBlur 事件 是 当 表 单元 素 失 去 焦点 时 触发 的 事件 。 当 text 对 象 、textare 对 象 或 select 
对 象 失去 焦点 时 ， 都 会 触发 该 事件 ， 执 行 对 应 的 程序 代码 。 


mb KH 134+ 视频 : 使 用 onBlur 事件 


CI TT a. m- G + 1 QD - w + 


HU 


<meta charset="utf-8"> 
<title>onBlur 事 件 </title> 
<script type="text/JavaScript"> 


or | 


function BlurMessage (msg) ( 
alert (msg) ; 


EP 
1 


} 


</script> 
</head> 


[91 FP] 执行 “文件 > 新建 命令 ， 新 建 一 个 空 自 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 
</title> 标签 后 输入 <script> 标签 ， 并 在 其 中 定义 JavaScript 脚本 语言 。 


</script> 
</head> 


<body> 

<p> 颜 色 : 

<input name= typen! 

Cat RISE Sage ( SEMA- MEXERARRA! ') "/> 
</p> 

<p> 

样式 : 

<input mame-"text2" rype-"t 

Satu — *anyareosage (EPIT XEMARRA! > 
</p> 

</body> 

</html> 4 Qiien emen mtkzs nnna =. B- [2 + 3 四 - mx 


02 PÆ <body> 标签 中 创建 <p> 标签 ， 并 在 其 中 输入 事件 代码 。 执 行 “ 文 件 > 保存 1 
将 文档 保存 为 “ 源 文 件 \ 第 11 章 \11-3-7html”， 按 Fl12 键 测试 页 面 效果 。 


第 11 章 JavaScript 脚本 基础 W 


提问 : 什么 是 事件 返回 值 ? 

答 : 在 很 多 情况 下 ， 程 序 都 要 求 有 返回 值 ， 以 便 程序 根据 返回 值 来 判断 
下 一 步 的 后 续 操作 。 事 件 的 返回 值 都 为 布尔 值 ， 如 果 为 false 则 组 织 浏览 器 
的 下 一 步 操作 ， 如 果 为 true 则 进行 默认 的 操作 。 


onMouseOver 事件 | 


onMouseOver 事件 是 当 鼠 标 指针 移动 到 某 对 象 范围 的 上 方 时 触发 的 ， 所 以 一 般 会 根据 
鼠标 的 动作 产生 变化 。 


SD 实例 135+ 视频 : 显示 图 像 


f 源 文 件 : 源 文件 \ 第 11 章 \11-3-8.html A 操作 视频 : 视频 \ 第 11 章 \11-3-8. swf 
1 <!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>onMouse0ver P ft</title> 
</head> 


| <body> 


<div id="bg"> 
| </div> 


Te u a. mms - D 1 </body> 
— </html> 


(01 JBS “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档。 切换 到 代码 视图 中 ， 在 <itle> 
标签 后 新 建 一 个 名 为 bg 的 <div> 标签 。 


<html: 


yle> 


[到 六 在 </title> 标签 后 新 建 一 个 <style> 标签， 在 <style> 后 新 建 * 通用 样式 ， 并 为 名 称 为 bg 
的 <div> 标签 建立 样式 ， 新 建 名 为 man 的 <div> 标签 和 为 该 标签 新 建 样式 。 
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#man( 
height:284px; 
width:166px; 
margin:289px Opx Opx 628px: 
y 
</style> 
</head> 


#man{ 
height:284px; 
width:166px; 
margin:289px Opx Opx 628px; 

visibility:hidden; 


color: #00CC66; 
background-color: #1A1819; 
margin: 20px Opx Opx 680px; 


sro 
" type="button" value=" e>] 


</body> 
</html> 


</style> 


[ 03 Pj 在 id 名 称 为 man 的 Div 标签 后 新 建 一 个 按钮 在 <style> 标签 后 新 建 一 个 名 为 btn 的 
CSS 类 样式 。 


(ava.layersf1l document); 


nes: 
Et Findpi crore (argu [i4])) tena 1) (einasgataitaly 


==' show") 2'v1sible" : (v= hide") ?"hidden" :v1;} 


PDA o SEE 3 EË <script> 标签 ， 并 建立 所 需 函 数 ， 对 按钮 应 用 bm 样式 和 在 
onmouseover 中 应 用 ShowPicture 函数 。 


[ 05 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-8.html”， 按 F12 键 
测试 页 面 效果 ， 将 鼠标 移 到 按钮 上 ， 显 示 隐 藏 图 像 。 


提问 : CSS 样式 中 的 overflow: hidden 有 什么 作用 ? 

答 : 当 两 个 Div TRER, WRK Div 和 子 级 Div 之 间 没 有 别 的 元 素 ， 
浏览 器 会 默认 把 子 级 Div 的 margin-top 作用 到 父 级 Div 的 身上 ， 这 就 会 给 页 面 造 
成 巨大 的 错误 。 而 如 果 为 父 级 Div 应 用 overflow， 就 可 以 很 好 地 决 解 这 个 问题 。 


KEJI onMouseOut 事件 


onMouseOut 事 件 是 当 鼠 标 指针 离开 到 某 对 象 范围 的 上 方 时 触发 的 , 可 以 产生 按钮 变化 、 
图 像 隐藏 等 效果 。 


EE 


Y 
动 实例 136+ 视频 : 隐藏 图 像 


f 源 文件 : 源 文件 \ 第 11 章 \11-3-9. html A 操作 视频 : 视频 \ 第 11 章 \11-3-9. swf 


width:1073px; 
margin:0 auto; 

background-image:url (images/113801.jpg); 
overflow:hidden; 


) 
#man( 

height:284px; 

width:166px; 

margin:289px Opx Opx 628px 
1 
.bcn ( 
| color: #00CC66; 
ama background-color: #1A1819; 


[ 01 PTF “AX S 11 章 \11-3-8.html”， 删除 名 为 man 的 <div> 标 签 样式 隐藏 图 层 属性 ， 
使 该 图 层 显示 出 来 。 
function ShowPiccure()( for (ii=0;ii<(argu.length-2);ii+=3)if((p=FindPicturi 


var 11,vi,p,argu=ShowPicture arguments; sal: 
for(11-0;11< (argu. length-2) ;114=3) 1f ((p=FindPicture(argu[i; 1f (p-style) ( 


+2); Prp.aryleivin(vi 一 ,ahow') ?'visible' : (vi=='hide')? 
if(p.style) { p.visibility-vi;) 
p-p. style;vi=(vi=—='show') ?'visible' : (vi=='hide')?'hidden'i 1 
p.visibility=-vi;) 
) </script> 
</head> 
</script> 
</head> <body> 
<div id="bg"> 
<body> <div id="man"><cimg src="images/113802.jpg" width" 
<div 1d="bg"> [akouseouc="ShowPiccure('man' '', ‘hide') "4 /div> 


<div id="man"><img sro="images/113802.jpg" width="166" he </div> 


name="putton" type="button" ciass="btn" </body> 
z="ShowPicture('man','', 'show')” value=" 容 身 " </html> 


T 
onson: 


[ 02 FP 删除 按钮 并 在 名 为 man 的 Div 标签 中 添加 onMouseOut 事件 ， 调 用 函数 , 传 进 hide 参 
数 使 图 像 隐藏 。 


[ 03 执行 “文件 > 保存 ”命令 ， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-9.html″， 按 F12 #Ë 
测试 页 面 效果 ， 将 鼠标 移 到 图 像 上 ， 再 将 鼠标 移 开 ， 图 像 将 隐藏 。 


© 5 > 网 页 制作 > 全 程 揭秘 
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V% 提问 : CSS 样式 中 的 visibility 属性 有 什么 作用 ? 
答 : 该 属性 用 于 设置 元 素 是 否 可 见 ， 而 hidden 属性 值 起 到 的 作用 是 元 
素 不 可 见 。 即 使 是 不 可 见 的 元 素 ， 也 会 占据 页 面 上 的 空间 。 


MERON onDblClick 事件 
onDblClick 事件 是 鼠标 双击 时 触发 的 。 该 事件 优先 选择 层次 最 深 的 图 形 单元 执行 ， 鼠 
标点 处 是 一 个 图 形 单元 ， 先 执行 图 形 的 OnDblClick 事件 ， 再 执行 页 面 的 OnDblClick 事件 。 


mb 实例 137+ 视频 : 双击 打开 网 站 


> < — — O . T UNPTX 


f 源 文 件 : 源 文 件 \ 第 11 章 \11-3-10.html A 操作 视频 : 视频 \ 第 11 章 \11-3-10, swf 


-i 
Ci 


01 | 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 输 入 
代码 。 执 行 “ 文 件 > 保存 ”命令 ,将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-10-1.html”。 


/mr 


[02 pJ </title> 标签 后 新 建 一 个 <style> 标签 ， 在 <style> 后 新 建 * 通用 样式 ， 为 名 称 为 bg 的 
<div> 标签 建立 样式 ， 新 建 名 为 man 的 <div> 标签 和 为 该 标签 新 建 样式 。 
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[005] 执行 “文件 > 保存” 命令， 将 其 保存 为 “ 源 文件 \ 第 11 章 \11-3-10.html”， 按 F12 键 
测试 页 面 效 果 ， 在 弹出 的 页 面 中 双击 鼠标 左 键 ， 观 察 页面 发 生 的 效果 。 


提问 : 如 何 控制 打开 页 面 的 大 小 ? 
答 : 用 户 可 以 通过 设置 ondblclick="OpenWindow" 中 的 width ( 宽 ) 和 
height (高 ) 属性 来 设置 打开 页 面 的 大 小 。 


时 攻 浊 其 他 常用 事件 


在 JavaScript 中 有 一 些 其 他 事件 ， 虽 然 不 常用 ， 但 是 了 解 这 些 事件 便于 我 们 在 需要 时 
用 上 它们 。 


参数 类 型 含义 
onkeypress 在 键盘 上 某 个 键 被 按 下 并 且 释放 时 触发 该 事件 
onkeydown 在 键盘 某 个 键 被 按 下 时 触发 该 事件 

onkeyup 在 键盘 某 个 键 被 放 开 时 触发 该 事件 


onmousedowm 在 鼠标 被 按 下 时 触发 该 事件 


onmouseup 在 鼠标 被 释放 时 触发 该 事件 
onmousemove 在 鼠标 移动 时 触发 该 事件 
onabort 在 图 片 下 载 被 用 户 中 断 时 触发 该 事件 


onbeforeunload 在 当前 页 面 的 内 容 将 要 被 改变 时 触发 该 事件 


onerror 在 出 现 错误 时 触发 该 事件 
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( 续 表 ) 

参数 类 型 含义 
onbounce 当 Marquee 内 的 内 容 移动 至 Marquee 显示 范围 之 外 时 触发 该 事件 
onsubmit 在 一 个 表单 被 递交 时 触发 该 事件 

onreset 在 表单 中 的 reset 属性 被 激发 时 触发 该 事件 

在 浏览 器 的 “停止 ”按钮 被 按 下 或 者 正在 下 载 的 文件 被 中 断 时 

Pu: 触发 该 事件 

onscroll 在 浏览 器 的 滚动 条 位 置 改变 时 触发 该 事件 

onresize 在 浏览 器 的 窗口 大 小 被 改变 时 触发 该 事件 

onstart 在 Marquee 元 素 开始 显示 的 内 容 时 触发 该 事件 

onfinish 在 Marquee 元 素 完 成 需要 显示 的 内 容 时 触发 该 事件 

onmove 在 浏览 器 窗口 被 移动 时 触发 该 事件 


onbeforeeditfocus 在 当前 元 素 将 要 进入 编辑 状态 时 触发 该 事件 


在 页 面 中 的 一 部 分 或 者 全 部 的 内 容 将 被 移 离 当 前 页 面 剪 切 并 移动 到 
浏览 者 的 系统 剪贴 板 时 触发 该 事件 

在 页 面 当前 的 选择 内 容 将 要 复制 到 浏览 者 的 系统 剪贴 板 前 触发 该 
事件 


onbeforeupdate 在 浏览 者 粘贴 系统 剪贴 板 中 的 内 容 时 通知 目标 对 象 


onbeforecut 


onbeforecopy 


onbeforepaste 在 浏览 者 将 系统 剪贴 板 中 的 内 容 粘贴 到 页 面 时 触发 该 事件 
在 浏览 者 按 下 鼠标 右键 出 现 菜单 时 或 者 通过 按键 触发 菜单 时 触发 该 
oncontextmenu 
事件 
oncopy 在 页 面 当 前 的 内 容 被 选择 复制 后 触发 该 事件 
oncut 在 页 面 当前 的 内 容 被 选择 剪 切 后 触发 该 事件 
ondrag 在 某 个 对 象 被 拖 动 时 触发 该 事件 
ondragenter 在 鼠标 拖 动 对 象 进入 其 容器 范围 内 触发 该 事件 


EE 
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( 续 表 ) 
参数 类 型 含义 
ondragend 在 鼠标 拖 动 结束 时 触发 该 事件 
ondragdrop 在 一 个 外 部 对 象 被 拖 进 当前 窗口 或 者 帧 时 触发 该 事件 
ondragleave 在 对 象 被 鼠标 拖 动 离开 其 容器 范围 内 时 触发 该 事件 
ondragover 在 某 被 拖 动 的 对 象 在 另 一 对 象 容器 范围 时 触发 该 事件 
ondragstart 在 某 对 象 将 被 拖 动 时 触发 该 事件 
onpaste 在 内 容 被 粘贴 时 触发 该 事件 
onlosecapture 在 元 素 失去 鼠标 移动 形成 的 焦点 时 触发 该 事件 
ondrop 在 一 个 拖 动 过 程 中 ， 释 放 鼠 标 时 触发 该 事件 
oncellchange 在 数据 来 源 发 生 改 变 时 触发 该 事件 
onafterupdate 在 完成 由 数据 源 到 对 象 的 数据 传送 时 触发 该 事件 
onselectatart 在 文本 选择 将 开始 时 触发 该 事件 
ondatasetcomplete 在 数据 源 的 全 部 有 效 数据 读 取 完毕 时 触发 该 事件 
ondatasetchanged 在 数据 源 发 生变 化 时 触发 该 事件 
ondataavailable 在 数据 接收 完成 时 触发 该 事件 
onrowenter 在 当前 数据 源 的 数据 发 生变 化 并 且 有 新 的 有 效 数 据 时 触发 该 事件 
onrowexit 在 当前 数据 源 的 数据 将 要 发 生变 化 时 触发 该 事件 
当 使 用 onBeforeUpdate 事件 触发 取消 了 数据 传送 时 ， 代 震 
Sheu onAfterUpdate 事件 
onafterprint 在 文档 被 打印 后 触发 该 事件 
onrowsinserted 在 当前 数据 源 将 要 插入 新 数据 记录 时 触发 该 事件 
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( 续 表 ) 
参数 类 型 含义 

onrowsdelete 在 当前 数据 记录 将 被 删除 时 触发 该 事件 

onbeforeprint 在 文档 即将 打印 时 触发 该 事件 
onreadystatechange 在 对 象 的 初始 化 属性 值 发 生变 化 时 触发 该 事件 
onpropertychange 在 对 象 的 属性 之 一 发 生变 化 时 触发 该 事件 

onhelp 在 浏览 者 按 下 F1 键 或 帮助 菜单 时 触发 该 事件 
onfilterchange 在 某 个 对 象 的 滤 镜 效果 发 生 改 变 时 触发 该 事件 
11.4 浏览 器 的 内 部 对 象 


使 用 浏览 器 的 内 部 对 象 系统 ， 可 实现 与 HTML 文档 进行 交互 。 它 的 作用 是 将 相关 元 
素 组 织 包装 起 来 ， 提 供给 程序 设计 人 员 使 用 ， 从 而 减轻 编程 人 员 的 劳动 量 ， 提 高 设计 Web 


页 面 的 能 力 。 


内 部 对 象 包 括 : navigator. document. windows. location 和 history; 


(KEN navigator 对 象 


navigator 对 象 可 用 来 存 取 浏览 器 的 相关 信息 。 它 的 常用 属性 如 下 : 


属性 说 明 
appName 浏览 器 的 名 称 
appCodeName 浏览 器 的 代码 名 称 
appVersion 浏览 器 的 版 本 
plugins 使 用 的 插件 信息 
plateform 浏览 器 的 操作 系统 平台 
cookieEnabled 浏览 器 中 是 否 启用 cookie 的 布尔 值 
browserLanguage 浏览 器 的 语言 


EE 
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mb 实例 138+ 视频 : 显示 浏览 器 信息 


* sz namsa 


EDATN RRA Nesape 
EDTN ES. Widows NT 61) Apple WebKi'337.1 (KHTML, Be Gecko) 
j4.1.23000 Chrome 26 01410 43 Safar$37.1 


TAARNA RERE E Moala 


加 m- 口 必 号 四 - mv + | 


Aai 源 文件 \ 第 11 S£ \11-4-1.html SÀ) 操作 视频 : 视频 \ 第 11 章 \11-4-1. swf 


| 人， €e SEV AD 修改 (M) UO) SAO MAS BOW EWH 


Kali maa D Q LC E =s 
<!qoctype henl> 

sssi 

head> 

meta cnarse==utr-s"> 
<cicleynavigacor 对 象 </ricle> 

<script tpe="tezt/Javascript"> 


function check) t 
document.write ("BA 
document. write(" 
document. vrite ("S 


"navigator .appName+"<br>") ; 
Ertnavigotor.appVersiont" <br>") ; 
HME navigator. appCodeNane+"<br>") : 


</script> 
</head> 


[01 ihi “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 切 换 到 代码 视图 中 ， 在 
</title> 标签 下 方 输入 <script> 标签 ， 并 在 其 中 定义 JavaScript 脚本 语言 。 


* Wm munasa 
和 ac 
Fab 


<title>navigator 对 象 </title> 
<script type="text/Javascript"> 


function check()( 
document.write 
document.write 
document.write 
1 


"您 的 网 页 浏览 器 名 称 "+navigator .appName 
网 页 浏览 器 版 本 "+navigacor .appVera 
网 页 浏览 器 使 用 语言 "+navigator .app 


Mateu 1 2 3000 Chrom 26 0 1410 43 Salari 537. 
DARDIR NERE ESen 


</script> 
</head> 


<body [onLoad="checx O "P 


</body> 
</html> 


[ 02 >] 继续 输入 其 他 代码 ， 执 行 “ 文 件 > 保 存 ” 命 令 ， BERES AA. 
F F12 键 测试 页 面 效 果 。 


提问 : JavaScript 中 的 document. wr ite 有 什么 作用 ? 
答 : document.write() Æ JavaScript 向 客户 端 写 入 的 方法 ， 将 内 容 写 入 文 
档 ， 并 且 会 直接 产生 输出 效果 。 


document 对 象 可 用 于 JavaScript 输出 ， 该 对 象 有 form. links 和 anchor 3 个 重要 对 象 。 


区 5 对 HT 5 > 网 页 制作 > 全 程 揭秘 


@ form 窗 体 对 象 ; 含有 多 种 格式 的 对 象 存储 信息 ， 使 用 它 可 以 用 来 动态 改变 文档 的 行为 。 


@ links 链 接 对 象 ; 用 <a hre 仁 …>…</a> 标 记 和 链接 一 个 特定 URL。 
@ anchor 锚 对 象 ; 用 <aname=…>…</a> 标 记 的 命名 锚 。 
g document 对 象 有 write() 和 writeln() 两 种 方法 用 来 实现 在 Web 页 面 
上 显示 输出 信息 。 


有 实例 139+ 视频 : 显示 网 页 信息 


— ` 


roonolin "a “ng... 
i 


RET RE 


f 源 文件 : 源 文件 \ 第 11 章 \11-4-2. html 


function statisticsLings()( 
lani 'ocunent. links. length; 
linkContent="", 


re 


[01 >] 执行 “文件 > 新建” 命令 ， 新 建 一 个 空 自 的 HTM 5 XE, 切换 到 代码 视图 中 ， 输 入 
<script> 标签 ， 并 在 该 标签 中 输入 代码 。 


</head> 


<body> 

<torm> 

<input name="button" cyPe="buccon”Valoe=" 页 面 中 所 有 连接 "| 
onClick="StatisticsLinks ()"><br> 

</form> 


OE 


m. G + nm - m. 


[02 P| 输入 其 他 的 代码 ， 执 行 “ 文 件 > 保 存 ” 命 令 ， 将 其 保存 为 < 源 文 件 第 11 章 \11-4.2html 
按 Fl12 键 测试 页 面 效果 ， 单 击 按钮 ， 显 示 链 接 内 容 。 
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A 提问 : JavaScript 脚本 语言 中 的 书写 区 分 大 小 写 吗 ? 


答 : JavaScript 脚本 语言 的 书写 规范 是 区 分 大 小 写 的 ， 例 如 函数 
newCreate() 和 NewCreate() 是 不 一 样 的 。 


KEET Windows 对 象 


Windows 对 象 是 DOM 对 象 模型 的 最 顶层 对 象 ， 代 表 了 浏览 器 中 用 于 显示 文档 内 容 的 
窗口 ， 通 过 该 对 象 可 以 访问 DOM 对 象 模型 中 的 所 有 对 象 。 该 对 象 可 以 实现 JavaScript 的 输 
入 。 它 的 常用 方法 如 下 : 


方法 方法 的 含义 及 参数 说 明 
alert(text) 弹出 一 个 对 话 框 ， 显 示 text 
close(text) 关闭 一 个 窗口 
confirm(text) 弹出 确认 对 话 框 ， 显 示 text 


Promt(text,defaulttext) | 弹出 提示 框 ， 显 示 text，defaulttext 为 默认 情况 下 显示 的 文字 
MoveBy( 水 平 位 移 ， 


垂直 位 移 按 给 定 的 像素 移动 指定 的 窗口 
moveTo(x,y) 将 窗口 移 至 指定 的 位 移 
ke ao 按 给 定 的 位 移 量 重新 设置 窗口 大 小 
resizeTo(x,y) 将 窗口 设 定 为 指定 大 小 
Back() 页 面 后 退 
Forward) 页 面前 进 
Home() 返回 主页 
Stop) 停止 加 载 网 页 
Print() | 打印 网 页 
status | 状态 栏 信 息 
location | 当前 窗口 URL 信息 
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( 续 表 ) 
7 方法 的 含义 及 参数 说 明 
open(urlwindowNameP | 创建 一 个 新 窗口 ，3 个 参数 分 别 用 于 设置 URL 地 址 
arameterlist) 
时 内 部 对 象 使 用 的 时 候 无 须 手 动 创 建 ， 只 要 在 HTML 文档 或 者 Web X: 
档 中 使 用 了 标签 ， 系 统 就 会 自动 创建 一 个 Window 对 象 。 
PW location 对 象 
location 对 象 描述 窗口 打开 的 地 址 。 常 用 属性 如 下 : 
属 性 实现 的 location 属性 
protocol 返回 地 址 的 协议 ， 取 值 为 http:、file: 等 
port 返回 地 址 的 端口 号 ， 一 般 http 端口 号 是 80 
host 返回 主机 名 和 端口 号 ， 如 www.baidu.com: 8080 
hostname 返回 地 址 的 主机 名 
pathname 返回 路 径 名 ， 不 包含 域名 
ik 返回 “#” 以 及 其 后 的 内 容 ， 如 果 地 址 里 没有 “#”， 则 返回 空 
5 
字符 串 
返回 “?” 以 及 其 后 的 内 容 ， 如 果 地 址 里 没有 “?”， 则 返回 空 
search 
字符 串 
href 返回 整个 地 址 
location 对 象 常用 方法 如 下 : 
属 性 实现 的 location 属性 
assign(sURL) 读 取 新 的 URL 
reload([bReloadSource]) | 重新 加 载 URL， 相 当 于 “刷新 ”功能 
replace(sURL) 读 取 新 的 URL 


ES 


第 11 章 JavaScript 脚本 基础 KJA 


@ assign 与 replace 是 有 区 别 的 。 用 assign 打开 一 个 URL， 可 以 后 退 到 
之 前 的 页 面 ， 用 Teplace 后 退 到 一 个 URL， 不 能 后 退 到 之 前 的 页 面 。 


KEET history 对 象 
history 对 象 是 浏览 器 的 浏览 历史 ，history 对 象 常用 的 方法 主要 包括 : 
@ back0: 后 退 ， 相 当 于 “后 退 ”按钮 。 
© forward0: 前 进 ， 相 当 于 “前 进 ” 按 钮 。 
@ ”go0: 用 来 进入 指定 的 页 面 。 


f 源 文件 : 源 文件 \ 第 11 章 \11-4-5.html A 操作 视频 : 视频 \ 第 11 章 \11-4-5. swf 


ow = 


<meta charset="utf-8"> 
<title>history 对 象 </title> 


</head> 


<body> 

<div id="bg"> 
</div> 

2 12 </body> 

= LEN </html> 


[91 PAT ARE G, 新 建 一 个 空白 的 HTML 5 文档 ， 切 换 到 代码 视图 中 ， 新 
建 一 个 id 名 称 为 b 的 <div> 标签 。 


<title>history 对 象 </title> 
style type="text/css"> 


border:0px: 
padding: 0px; 
margin: Opx; 


[fba ( 


height:587px; 

width: 900px; 

margin:0 auto; 

background-image:url (images/114501.jpg); 
overflow:hidden; 


[ 02 pJ <itle> 标签 后 新 建 一 个 <style> 标签 ， 在 <style> 后 新 建 * 通用 样式 ， 并 为 id 名 
称 为 bg 的 <div> 标签 建立 样式 ; 新 建 两 个 按钮 ， 并 设置 相应 的 onclick 事件 为 前 进 、 后 退 。 


© HTML 5 > 网 页 制作 >》 全程 揭秘 ) 


2 =m background-color: #1A1819; 
13 heighe:s87px; margin: 20px Opx Opx 60px; 


1 (images/114501. pg); 


</style> 
</head> 
color: #00CC66; <body> 
background-color: #1A1819; <div id="bg"> 


margin: 20px Opx Opx 50px; 


.brn2 《 
olor: #ooccs67 


</body> 
</html> 


03 新 建 一 个 名 为 binl 的 CSS 类 样式 和 一 个 名 为 btn2 的 CSS 类 样式 ， 并 将 其 应 用 到 刚 创建 
的 两 个 按钮 上 。 


height:20px; 
width:247px; 

margin: 436px Opx Opx 326px; 
overflow:hidden; 


—"button" class="btn1" onClick 


} 
#1inking spant 
margin-left 


type="button" class="Dtn2" onClicH 


font-family: Arial; 
font-size: 13px; 
color: #7dc9bd; 


div id="linking"> 
<span>home</span> 
<span><a href="11-4-5-1.html">makeup</a></span: 
<span>about</span> 


<span>contact</span> 
color: #7dc9bd; 


text-decoration: none; 


04 P| 新 建 一 个 id 名 称 为 “linking” 的 Div, AE 中 新 建 4 个 <span> 标签 ， 并 在 第 2 个 
<span> 标签 中 创建 <a> 标签 ， 定 义 相应 的 CSS 样式 ， 将 其 保存 为 “第 11 章 \11-4-5html” 


[六 再 次 创建 一 个 空白 的 HIML 5 文档 ， 输 入 代码 ， 将 其 保存 为 “ 源 文 件 \ 第 11 章 册 4Slhtl" , 
按 Fl2 键 测试 11-45html 页 面 效 果 ， 单 击 链接 ， 链 接 到 11-4-5-] html, 


vera 


06 SIZI 11-4-5-1 html 页 面 后 ， 单 击 贡 面 左上 角 的 “返回 ” 按钮， 即 可 返回 到 1 114-5html š 
击 “ 前 进 ” 按 钮 ， 即 可 再 次 跳 转 到 11-4-5-1 html, 


EE C 
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提问 : JavaScript 编写 完成 后 ， 为 什么 没有 产生 效果 ? 

答 : 用 户 在 编写 脚本 语言 的 时 候 一 定 要 耐心 、 细 致 ， 要 注意 字符 是 否 输 
入 正确 ， 大 小 写 是 否 正确 ， 双 引号 、 单 引号 和 逗号 都 要 注意 英文 和 中 文 的 区 
别 ， 以 及 有 没有 空格 等 方面 ， 这 些 都 是 容易 出 错 的 地 方 。 


11.5 本 章 小 结 


本 章 主 要 向 用 户 介绍 了 JavaScript 脚本 语言 的 使 用 方法 ， 通 过 JavaScript 脚本 语言 可 
以 使 网 页 产生 动态 的 交互 效果 。 用 户 要 认真 了 解 本 章 中 介绍 的 内 容 ， 因 为 在 网 页 设计 中 
JavaScript 脚本 语言 有 着 非常 重要 的 作用 。 


第 12 章 使 用 HTML 制作 文字 
特效 


本 章 将 通过 实例 的 形式 使 用 HTML 5 结合 JavaScript、 
Div 以 及 CSS 制作 一 些 网 站 中 经 常会 看 到 的 文字 特效 。 


实例 141+ 视频 : 彩色 文字 移动 效果 


M 掌握 文字 滚动 效果 的 制作 


f 源 文件 : 第 12 章 \12-1.html A 操作 视频 ; 第 12 章 \12-1. swf 
mee man wav an = = = i Sg <! doc eh 


type html> 


| [7] 掌握 文字 跟随 鼠标 效果 


[v] 掌握 文字 自动 输入 效果 


| 区] 掌握 文字 替换 效果 01 jj] 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 


Ñ 文档 。 在 <title> 标签 中 输入 文档 的 标题 。 
加 掌握 文字 渐 显效 果 的 制作 : = 8 = 


02 pJ <body> 标签 下 方 创建 <marquee>. <b> 和 <font> 
标签 对 ， 并 为 刚刚 创建 的 标签 添加 属性 。 


[o3 P| 在 3 个 标签 对 的 中 间 输 入 <marquee> 标签 和 <font> 
标签 ， 并 为 标签 添加 属性 以 及 文字 内 容 。 


第 12 章 使 用 HTML 制作 文字 特效 WA 


<body> 

<marquee scrollamount=8 direction=right behavior=alternate> 

<b> 

<font color=#7700BB size=5> 
marquee direction=up behavior=alternate width=40 height=200 align="middle">H</marquee><font color=#FF0> 
marquee direction=up behavior=alternate width=40 height=150>T</marquee><font color=#FF9000> 
marquee direction=up behavior=alternate width=40 height=200>M</marquee><font color=FF0078> 
marquee direction=up behavior=alternate width=40 height=150>L</marquee><font color=A2AFOF> 
marquee direction=up behavior=alternate width=40 height=200> 全 </marquee><font color=00DB1A> 
marquee direction=up behavior=alternate width=40 height=150> 程 (/marquee><font color=#FF0> 
marquee direction=up behavior=alternate width=40 height=200> 揭 c/marquee><font color=#6F2DC1> 
marquee direction=up behavior=alternate width=40 height=150> 秘 </marquee><font color=#FF9000> 


</marquee> 
</body> 
</html> 


[ 04 P] 使 用 同样 的 方法 输入 其 他 相同 的 标签 ， 并 修改 font 元 素 中 的 颜色 值 ， 在 <marquee> 
标签 对 中 添加 内 容 文字 。 


加 
= 
= 
wË 
ma Fi 

Awam. nroa . 

ss, SEE ———— [= 
mine A sess 

Eak wan ka om Sasak; 
fa CTE 


[丁克 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 12 章 \12-1.html”， 按 F12 
键 测试 页 面 中 的 文字 移动 效果 。 


Q ZW sa. 如 何 实现 文字 的 移动 ? 
部 答 : marquee 是 滚动 代码 ， 这 其 实 是 比较 基础 的 网 页 效果 代码 ， 用 户 只 
需要 输入 <marquee>…<marquee> 标签 就 可 以 实现 一 段 文字 的 滚动 ， 但 是 如 
果 想 让 它 进行 一 些 特殊 的 滚动 方式 ， 就 需要 对 其 他 一 些 参数 进行 设置 。 


实例 142+ 视频 : 文字 滚动 效果 


f 源 文件 : 源 文件 \ 第 12 章 \12-2. html A 操作 视频 : 视频 \ 第 12 章 \12-2. swf 


© MUDRE 


Hl 


ED 


| 


z e 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 字 滚动 效果 </title> 
</head> 


<body> 
</body> 
</html> 


Co FP] 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 


档 的 标题 。 
<title> 文 字 滚动 效果 </title> 
</head> 


<body> 
<p align="center"> 
滑 城 朝 雨 温 轻 尘 ， 客 舍 青 青 柳 色 新 。<bzr/> 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 故人 。<bzr/> 
</p> 
</body> 
</html> 


<html> 
<head> 

<meta charset="utf-8"> 
<title> 文 字 滚动 效果 </title> 
</head> 


<body> 
<p align="center"> 


<marquee style="width:550px; height:220px"> 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 故人 。<br/> 
</marquee> 
</p> 
</body> 
</html> 


02 P| 在 <body> 标签 中 添加 <p> 标签 ， 定 义 其 对 齐 属性 为 center， 在 <p> 标签 中 输入 文本 
内 容 。 在 文本 内 容 的 上 方 添加 <marquee> 标签 ， 用 于 设置 文字 滚动 ， 并 添加 style 属性 ， 


用 于 定义 滚动 文字 的 区 域 大 小 。 


<title> 文 字 滚 动 效 果 </title> 
</head> 


<body> 
<p align="center"> 


<marquee style="width:550px; height:220px" bgcolor="#FF9933" scrollamount="4" direction="up"> 


渭城 朝 雨 温 轻 尘 ， 客 舍 青 青 柳 色 新 。<bz/> 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 地 人。<br/> 
</marquee> 
</p> 
</body> 
</html> 


[ 03 P| 继续 为 <marquee> 标签 添加 背景 颜色 等 属性 。 


<title> 文 字 滚动 效果 </zicle> 
</head> 


<body> 
<p align="center"> 
<marquee style="width:550px; heigk 
<font> 
滑 城 朝 雨 温 轻 尘 ， 客 舍 青 青 柳 色 新 。<bz/> 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 故人 。<bzr/> 


<title> 文 字 滚动 效果 </title> 
</head> 


<body> 
<p align="center"> 


<marquee style="width:550px; height:220px" bç 
<div align="center"> 
<font color="#ffffff" face=" 黑 体 " size="6"> 
滑 城 朝 南 净 轻 尘 ， 客 舍 青 青 柳 色 新 。<br/> 
劝 君 更 尽 一 杯 酒 ， 西 出 阳 关 无 故人 。<bzr/> 


XZ/font></marquee> </font></div></marquee> 
</p> </p> 
</body> </body> 
</html> </html> 


[ 04 为 文本 内 容 添加 <font> 标签 。 在 <font> 标签 中 添加 color, face 和 size 属性 ， 用 于 


定义 文本 的 颜色 、 字 体 以 及 字号 等 参数 。 


EE 
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[Lo5 多 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 12 章 \12-2.html”， 按 Fl12 键 
测试 页 面 中 的 文字 滚动 效果 。 


提问 : marquee 是 如 何 控制 文字 滚动 的 ? 
答 : 在 <marquee> 标签 中 添加 scrollamount 属性 和 direction 属性 可 以 
控制 文字 的 滚动 速度 以 及 文字 滚动 的 方向 。 


mb 实例 143+ 视频 : 文字 跟随 鼠标 效 


| 


LUUEPTUUTIUUYTT II 
"Bm R - B - > @ = mo- aos 10- @- | 


RET 


Ea AHER REDESA a- tos + 
f 源 文件 : 源 文件 \ 第 12 章 \12-3.html A 操作 视频 : 视频 \ 第 12 章 \12-3. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 字 跟随 鼠标 效果 </title> 
</head> 


women y 
HHE 


abir 
EH 


<body> 
</body> 
</html> 


[Lo1 PT ARE fh, ETEA HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 并 在 <body> 标签 中 新 建 一 个 名 称 为 wrapper 的 <div> 标签 。 


© HTML 5 > 网 页 制作 > 全 程 揭秘 ) 


var x,y 
Var step=15 

var flag=0 

var message="HTML+Javascript" 
nessage-message. split (rr) 

var xpos=new ¿rray() 

for (i=0;i<=message.length-1;i++) { 


message="HTML+Javascript" 
</script> ar ypos=new Array() 


</body> for G: O;i<=message.length-1;i++) { 


</html> function handlerMM (e) { 


[ 02 PÆ <body> 标签 中 添加 <script> 标签 对 ， 并 在 该 标签 对 中 定义 4 个 变量 。 继 续 在 刚刚 
输入 的 变量 下 方 定义 其 他 变量 和 关键 字 。 


function handlerMM (e) { 

x = (document .layers) ? e.pageX : document .body.scrollLeft+event. 
clientX 

y = (document .layers) ? e.pageY : document .body.scrollTopt+event. 
clientY 

flag=1} 

function makesnake() { 

if (flag==1 && document.all) { 

for (i=message.length-1; i>=1; i--) { 
xpos [i]=xpos[i-1]+step 

ypos[i]=ypos[i-1] t 

xpos[0]=x+step 

ypos [0]=y 

for (i=0; i<message.length-1; i++) ( 
var thisspan = eval("span"+(i)+".style") 
thisspan.posLeft=xpos[i] 
thisspan.posTop=ypos[i] } } 

else if (flag==1 && document.layers) { 
for (i=message.length-1; i>=1; i--) { 
xpos [i]=xpos[i-1]+step 
ypos[i]=ypos[i-1] ) 
xpos[0]=x+step 

ypos [0]=y 

for (i=0; i<message.length-1; i++) { 
var thisspan = eval("document.span"+i) 
thisspan.left=xpos[i] 
thisspan.top=ypos[i]) } 

var timer=setTimeout ("makesnake ()",20)} 
</script> 

<script> 

for (i=0;i<=message.length-1;i++) { 
document .write("<span id='span"+i+"'>") 
document.write (message [i]) 

document .write("</span>")} 

if (document .layers)t{ 

document .captureEvents (Event .MOUSEMOVE) ; } 
document .onmousemove = handlerMM; 
</script> 


Cos 多 使 用 同样 的 方法 完成 其 他 相同 部 分 的 制作 。 


— o ff 
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<title> 文 字 跟 随 鼠 标 效果 </title> 


<style type="text/css"> 


.Spanstyle { 

ap for (i=0;i<=message.length-1l;i++) ( 
position:absolute; document write ("<span id='span"+i+"'class='spanstyle'y") 
visibility:visible; document.write (message[i]) 
document .write ("</span>")} 


<script> 


top: ee if (document.layers) { 
font-size:9pt; document .captureEvents (Event .MOUSEMOVE) ; } 
color: #0000FF; document .onmousemove = handlerMM; 
} </script> 

</body> 
</style> </html> 


在 <title> 标签 下 方 输入 <style> 标签 对 ， 并 为 该 标签 定义 type 属性 ， 在 <style> 标签 
中 定义 一 个 CSS 类 样式 。 修 改 <body> 标签 中 最 下 方 的 <script> 标签 内 的 内 容 ， 为 其 添加 
class 属性 。 
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TEDA AERE G, BEREI XE SE 12 章 \12-3 html”， 按 Fl12 
键 测试 页 面 在 IE 浏览 器 中 的 文字 效果 。 


e 


提问 : 为 什么 在 页 面 中 添加 JavaScript 脚本 ? 
答 : 因为 使 用 HIML 语言 只 能 形成 一 些 简单 的 效果 ， 而 使 用 JavaScript 
脚本 语言 配合 HTML 语言 ， 可 以 制作 出 较为 特殊 的 网 页 特效 。 


mb EP 144+ 视频 : 文字 输入 效果 


=s 
+ @ @ % + |+ neamunesasvapseekaisapuepy i + i- a= PEY EE 


Progress is the product of human agency. Things get better 
because we make them better. Things go wrong when we get 
too comfortable, when we fail to take risks or seize 
opportunities. 


— Susan ace Sianiyd unersay Commencement. 2010 


J BB-G: 四 - w + 


f 源 文件 : 源 文件 \ 第 12 章 \12-4.html D 操作 视频 : 视频 \ 第 12 章 \12-4 swf 


© MUDRI 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


</head> 


` 
. 
s 
日 
` 
. 


siie 


<body> 
<div id="wrapper"> 
</div> 
</body> 


</html> 


01 P| 执 行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 并 在 <body> 标签 中 新 建 一 个 id 名 称 为 wrapper 的 <div> 标签 。 


<head> 


a ddd 
ta 二 
<div id="wrapper"> ss 
<div id="words"> <div id-"vrapper"> 
karv 1de"wozras"> 
<ul> E 
</ul> Tne most important chlng in life 1s to learn now to give out love, 
and zc let it come in. 
i </li> 
</div> E 
i /div; 
</div> et 
</body> e 


<title> 文 字 输 入 效果 </title> 


[ 02 pJ# id 名 称 为 wrapper 的 Div 中 再 次 新 建 一 个 id 名 称 为 words 的 <div> 标签 ， 使 两 个 


Div 元 素 形 成 戏 套 效果 。 在 id 名 称 为 words 的 <div> 标签 中 输入 <ul> 标签 。 


<li> 
所 有 的 瞬间 都 会 济 没 于 时 间 的 洪流 ;就 像 泪 水 消逝 在 雨中 。 
All those moments will be lost in time, like tears in rain. 
</1i> 
<li> 
The animation can be in random or pre-defined in the HTML. Next quote 
animation will be all in fadeInDown. Optional click to next quote and 
hover to pause the slideshow. 
</1i> 
<li> 
Always do right. This will gratify some people and astonish the 
rest. 
</li> 
<li> 
Progress is the product of human agency. Things get better because 
we make them better. Things go wrong when we get too comfortable, 
when we fail to take risks or seize opportunities. 
</1i> 
<1i> 
You cang#39;t have a light without a dark to stick it in. 
</1i> 
<li> 
You must not lose faith in humanity. Humanity is an ocean; if a few 
drops of the ocean are dirty, the ocean does not become dirty. 
</1i> 
<li> 
When I do good, I feel good; when I do bad, I feel bad, and that is 
my religion. 
</1i> 
<li> 
Half the money I spend on advertising is wasted; the trouble is I 
don&#39;t know which half. 
</li> 

</ul> 


使 用 相同 的 方法 输入 其 他 的 文本 内 容 。 


第 12 章 使 用 HTML 制作 文字 特效 WA 


<ul> 
<li data-author="--- Morrie Schwartz" data-easeout="lightSpeedOut"> 
The most important thing in life is to learn how to give out love, 
and to let it come in. 
</1i> 
<li data-author=""> 
所 有 的 瞬间 都 会 总 没 于 时 间 的 洪流 ,就 鲁 泪 水 消逝 在 雨中 * 
All those moments will be lost in time, like tears in rain. 
</1i> 
<li data-author="" data-easeout="fadeOutDown"> 
The animation can be in random or pre-defined in the HIML. Next quote 
animation will be all in fadeInDown. Optional click to next quote and 
hover to pause the slideshow. 
</1i> 
<li data-author="Mark Twain (1835 - 1910)" data-easein="fadeInDown"> 
Always do right. This will gratify some people and astonish the 
rest. 
</1i> 
<li data-author="--- Susan Rice, Stanford University Commencement, 2010" data-easeout="bounceOut"> 
Progress is the product of human agency. Things get better because 
we make them better. Things go wrong when we get too comfortable, 
when we fail to take risks or seize opportunities. 


</li> 

<li data-author="--- Arlo Guthrie (1947 - )" data-easein="bounceIn"> 
You cant have a light without a dark to stick it in. 

</li> 


<li data-author="--- Mahatma Gandhi (1869 - 1948)" data-easein="lightSpeedIn"> 
You must not lose faith in humanity. Humanity is an ocean; if a few 
drops of the ocean are dirty, the ocean does not become dirty. 
</1i> 

<li data-author="--- Abraham Lincoln (1809 - 1865), (attributed)"> 
When I do good, I feel good; when I do bad, I feel bad, and that is 
my religion. 

</li> 

<li data-author="--- John Wanamaker (1838 - 1922), (attributed)"> 
Half the money I spend on advertising is wasted; the trouble is I 
dont know which half. 


</li> 
为 刚刚 创建 的 <li> 文本 内 容 标签 添加 data-author 属性 ， 为 文本 内 容 添加 脚注 。 
EE = = me w 4 —— = m SELL | 
让 === ° 
T masupa aw 
Bus munaa. ia 
, _ HE sem i z 
—— 
l EEA antra za omo š Cmo isso nessa aa e 


CO5 P] 执 行 “ 文 件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 12 章 \12-4.html”。 执 行 “ 文 
件 > 新建” 命令， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 CSS 选项 。 


w 


margin: 0; 

padding: 0; 

border: 0; 

font-size: 100%; 

font: inherit; 
vertical-align: baseline; 


PEIE 


(os P] 单 击 “ 创 建 ” 按 钮 新建 一 个 空白 的 CSS 文档 。 在 新 建 的 CSS 文档 中 以 * 号 字符 定 
义 通 配 样 式 。 


EE 
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"a 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 


ol, ul ( 
list-style: none; 

} 

blockquote, q ( 
quotes: none; 

} 

blockquote:before, blockquote:after, 

q:before, q:afcer ( 
content: ''; 
content: none; 

1 


》 table ( 

body ( border-collapse: collapse; 
line-height: 1; R border-spacing: 0; 

} 


使 用 相同 的 方法 为 其 他 的 元 素 定义 样式 。 


<!doctype html> 


m= == < L 
| mo < - osen- <head> 
| % = mecca - = <meta charset="utf-8"> 
eer tas wass <caicle> 文 字 输 和 效果 c/cicley 
| m <link rel="stylesheet" href="css/12401.css"> 
| æ </head> 

e <body> 

~ <div id="wrapper"> 

w <div ide"words"> 

4 <ul class="word-container"> 

% . n i <li data-author="--- Morrie Schwartz" data-easi 

- "lightSpeedout"> 
"omn Ps : ”ia thing dn 1168 39 so deseni ho] 
Grano: [LI s 
=s give out love, 
wou pmp SEE - Lamak and to let it come in. 
Bas min zh wwe tane </11> 
<li data-author=""> 


[ 98 PIT AIE > 保存 ”命令 ， 将 CSS 文档 保存 为 “ 源 文件 \ 第 12 章 \css\12401.css”。 
返回 到 html 文档 中 ， 在 <title> 标签 下 方 输入 link 元 素 并 为 其 添加 rel 和 href 属性 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 文 字 输 入 效果 </title> 
<link rel="stylesheet" href="css/12401.css"> 
<link rel="stylesheet” href="css/12402.css"> 
<link rel="stylesheet" href="css/12403.css"> 
</head> 
<body> 
<div id="wrapper"> 
<div id="words"> 
<ul class="word-container"> 
<li data-author="--- Morrie Schwartz" 
"lightSpeedOut"> 


[09 Pp] 使 用 相同 的 方法 新 建 并 链 入 另外 两 个 CSS 文档 。 在 文本 内 容 的 下 方 创建 一 个 
<div>、<p> 和 <cite> 等 标签 ， 并 为 这 些 标签 添加 class 属性 。 


)* data-easein= 


in humanity, Humanity is an oceanz if a few 
an are dirty, the ocean does not become dirty, 


~ Abraham Lincoln (1809 - 1965), (ettributed)"> 
I, I feel good; when T do bad, I feel bad, and that is 


-o S) s— ú 
| 
== 
Be ÉE 
1=. = === 
¿zz Ga esse | vonaeaeaer 


单 击 “ 创 建 ” 按 钮 ， 完 成 空白 JavaScript 文档 的 创建 。 


EE > ` 


var 0xac34=["\x72\x6F\x6C\x€6C\x49\x6E", "\x66\x61\x64\x65\x49\x6E", 
"\xE66\x61\x64\x65\x49\x6E\x55\x70", "\x66\x61\x64\x65\x49\x6E\x44\x6F\x77\x6E", 
"\x66\x61\x64\x65\x49\x6E\x4C\x65\x66\x74", 
"\xX66\x61\x64\x65\x49\x6E\x52\x69\x67\x68\x74", 
"\x62\x6F\xT5\x6E\x63\x65\x49\x6E", 
"NZ62NXKZ6FNXZ75NX6ENx63Xx65NXX49 Z6ENx44Xx6FNx77Nx6E", 
P\x62\XxX6F\x75\x6E\x63\x65\x49\x6E\x55\x70", 
"\X62\X6F\xXTS5\x6E\x63\x65\x49\x6E\x4C\x65\x66\x74", 
™\x62\xX6F\xXT5\xX6E\x63\x65\x49\x6E\x52\x69\x67\x68\x74", 
"\XT2\XE6F\XT4\xX61\x74\x65\x49\x6E\x44\x6F\x77\x6E\x4C\x65\x66\x74", 
"\XT2\X6F\xXT4\X61\xX7T4\xX65\x49\x6E\x44\x6F\x77T\xX6E\x52\x69\x67\x68\x74", 
m\x72\XxX6F\x74\x61\x74\x65\x49\xX6E\x55\x70\x4C\x65\x66\x74", 
n\X72\xX6F\x74\x61\x74\x65\x49\x6E\x55\x70\x52\x69\x67\x68\x74", 
"\x66\x61\x64\x65\x49\x6E\x4C\x65\x66\x74\x42\x69\x67", 
"\x66\xX61\x64\x65\x49\x6E\x52\x69\x67\x68\x74\x42\x69\x67", 
"\X66\x61\x64\x65\x49\x6E\x55\x70\x42\x69\x67", 
"\x66\x61\x64\x65\x49\x6E\x44\x6F\x77T\x6E\x42\x69\x67", 
"\xXE66\X6C\XE69\xTO\xX49\xX6E\x58", "\x66\x6C\x69\x70\x49\x6E\x59", 
"\XEC\X69\x6T7\x68\xX74\xX53\x70\x65\x65\x64\x49\x6E", "\x74\x61\x64\x61", 
"\Xx73\x77\x69\x6E\x67", "\x73\x68\x61\x6B\ x65", "\x77\x6F\x62\x62\x6C\x65", 
#\x77\x69\x67\x67\x6C\x65", "\x70\x75\x6C\x73\x65", 
mM\XT2\X6F\XEC\XEC\X4F\XT5\xXT4", "\x66\x61\x64\x65\xX4F\x75\x74", 
"\x66\x61\x64\x65\x4F\x75\x74\x55\x70", 
"\xX66\xX61\x64\x65\x4F\x75\x74\x44\x6F\x77\x6E", 
"\x66\x61\x64\x65\x4F\x7T5\x74\x4C\x65\x66\x74", 
"\x66\x61\x64\x65\x4F\xX75\x74\x52\x69\x67\x68\x74", 
"Ax62Nx6FNXX75NX6ENx63VVx65Nx4FNx75Nx74", 
m\x62\x6F\x75\x6E\x63\x65\xX4F\x75\x74\x44\x6F\x77\x6E", 
P\x62\XxX6F\x75\x6E\x63\x65S\x4F\x75\x74\x55\x70", 
"Ax62Nx6FNXX75SNX6ENx63Vx65NXxX4FNx7SNX74Nx4CNx65Nx66Nx74", 
"\x62\x6F\x7T5\x6E\x63\x65\x4F\x75\x74\x52\x69\x67\x68\x74", 
"NZ72NxZ6FNx74 Xx61Nx74NXx65SNx4FNx75Nx74VVx44Nx6FNXx77Vx6ENx4CNx6SNx66Nx74", 
mM\XT2\X6F\xX7T4\X61\X74\xX65\x4F\x75\x74\xX44\xX6F\x77\x6E\x52\x69\x67\x68\x74", 
mW\XT2\X6F\xT4\x61\x74\x65\x4F\x75\x74\x55\x70\x4C\x65\x66\x74", 
"\XT2\X6F\x7T4\X61\x74\x65\x4F\x75\x74\x55\x70\x52\x69\x67\x68\x74", 
"\x66\x61\x64\x65\x4F\x7T5\x74\x4C\x65\x66\x74\x42\x69\x67", 
"\x66\x61\x64\x65\x4F\x75\x74\x52\x69\x67\x68\x74\x42\x69\x67", 
"\xX66\xX61\x64\x65\x4F\xX75\xX74\x55\x70\x42\x69\x67", 
"\xX66\X61\x64\x65\x4F\xX7T5\x74\x44\x6F\x7T7T\xX6E\x42\x69\x67", 
"\x66\xX6C\xX69\xTO\X4F\XT5\xXT74\x58", "\x66\x6C\x69\x70\x4F\x75\x74\x59", 
"\XEC\KE69\X6T\XEB\XT4\XKS53\XTO\XE6S5\X65\x64\x4F\xX75\x74", 
#\x71\xX75\xX6F\x74\x65\x52\x6F\x74\x61\x74\x6F\x72","\x66\x6E", 
"\xX2E\xTT\XE6F\xXT2\x64\x2D\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72", 
"\xX65\XT8\X7T4\X65\X6E\x64", "\x74\xX65\X78\x74", "\x61\x75\x74\x68\x6F\x72", 
"\x64\x61\x74\x61", "\x65\x61\x73\x65\x69\x6E", "\x65\x61\x73\x65\x6F\x75\x74", 
"\x65\x61\x63\x68", "\x6C\x69", "\x66\x69\x6E\x64", 
m\xX63\xX6F\X6E\x7T4\x61\x69\x6E\x65\x72", "\x2E\x71\x75\x6F\x74\x65", 
"\xX2E\xT1\x7T5\xX6F\X7T4\xX65\x2D\x63\x6F\x6E\x7T4\x65\x6E\x74", 
P\X2E\xX71\x75\x6F\x74\x65\x2D\x61\x75\x74\x68\x6F\x72", 
M\X5SF\x63\xX75\x72\x72\x65\x6E\x74\x49\x6E\x64\x65\x78", 
"\x65\x61\x73\x65\x49\x6E\x54\x79\x70\x65\x41\x72\x72", 
"\x65\x61\x73\x65\x4F\xX75\x74\x54\x79\x70\x65\x41\x72\x72", 
"\xXE6C\x65\x6E\x67\x74\x68", "\x63\x6C\x69\x63\x6B\x54\x6F\x4E\x65\x78\x74", 
"\x63\x6C\x69\x63\x6B", "\x6F\x6E", 
"\x68\x6F\x76\x65\x72\x54\x6F\x50\x61\x75\x73\x65", 
"\XT3\X6C\x69\x64\x65\x73\x68\x6F\x77", 
"NZ6DNxZ6FAx75NXX73NXx65Nx6CNx65NXx61NXx76Nx65", 
"\xXT3\X6C\X69\x64\x65\x73\x68\x6F\x77\x44\x65\x€6C\x61\x79", 
m\xX5F\x74\x69\x6D\x65\x72\x49\x44", "\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72", 
"\x20", "\x73\x70\XxX6C\x69\x74", "\x65\x61\x73\x65\x4F\x75\x74", 


© MOD ) 


"\xT1\xX7T5\x69\x63\x6B\x20\x61\x6E\x69\x6D\x61\x74\x65", 
"AZ72Nx61Nx6ENx64Vx6FNXx6D", "\x66\x6C\x6F\x€6F\x72", 
"\x61\x64\x64\x43\x6C\x61\x73\x73", 
"\xT2\x65\x6D\x€6F\x7T6\x65\x43\x6C\x61\x73\x73", "\x73\x70\x61\x6E", 
"\x65\xXE6D\xTO\xXT4\x79", "\x65\x61\x73\x65\x49\x6E", 
"\xX3C\xXT73\xX7TO0\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x61\x6E\x69\x6D\x61\x74\x 
€65","\x22\x20\x64\x61\x74\x61\x2D\x65\x61\x73\x65\x69\x6E\x3D\x22", "\x22\x3E", 
"\X3C\xX2F\x7T3\x70\x61\x6E\x3E\x20", "\x61\x70\x70\x65\x6E\x64"]; 

var easeInTypeArr=[_Oxac34[0], Oxac34[1], Oxac34[2], Oxac34[3], Oxac34[4], 
_Oxac34[5],_Oxac34[6],_ Oxac34[7], Oxac34[8], Oxac34[9], Oxac34[10], 0xac34[11]， 
_Oxac34[12], Oxac34[13], Oxac34[14], Oxac34[15], Oxac34[16], Oxac34[17], Oxac34 
[18]，0xac34[19]，0xac34[20]，0xac34[21]，0xac34[22]，0xac34[23]，0xac34[24]， 
_Oxac34[25],_Oxac34[26],_Oxac34[27]]; 

var easeOutTypeArr=[_ Oxac34[28],_O0xac34[29],_ 0xac34[30]， Oxac34[31],_ 0xac34[32] 
1_Oxac34[33],_0xac34[34],_Oxac34[35],_Oxac34[36],_ Oxac34[37],_0xac34[38], 
_0xac34[39]，0xac34[40]， 0xac34[41]， Oxac34[42], 0xac34[43]， Oxac34[44],_ 0xac34 
[45], _Oxac34[46], Oxac34[47], Oxac34[48], _Oxac34[49]]; (function (_0x30b5x3)1{ 
_0x30b5x3[_0xac34[51]] [_0xac34[50]]=function (_0x30b5x4) {var _0x30b5x5={ 
container: Oxac34[52],easeIn: Oxac34[4],easeOut: Oxac34[32],easeInTypeArr:[ 
_Oxac34[1], Oxac34[3], Oxac34[2], Oxac34[4], Oxac34[5], _Oxac34[11], Oxac34[12], 
_Oxac34[13], __0xac34[14]],easeOutTypeArr: [_Oxac34[32], Oxac34[33],_ 0xac34[30]， 
_Oxac34[31], Oxac34[28],_ Oxac34[34], Oxac34[49]],slideshow:true,slideshowDelay: 
3000,hoverToPause:false,clickToNext:true}; 

if (_0x30b5x4) (_0x30b5x3[_0xac34[53]] (_0x30b5x5, _0x30b5x4);) ; 

Var _0x30b5x6=this; 

var _0x30b5x7=[]; 

var _0x30b5x8=[]; 

var _0x30b5x9=[]; 

var _0x30b5xa=[];_0x30b5x3 (_0x30b5x5[_0xac34[62]],_0x30b5x6) [_0xac34[61]] ( 
_Oxac34[60]) [_0xac34[59]] (function (_0x30b5xb) {_0x30b5x7[_0x30b5xb]=_0x30b5x3( 
this) [_0xac34[54]] ();_0x30b5x8 [_0x30b5xb]=_0x30b5x3 (this) [_0xac34[56]] (_Oxac34[ 
55]);_0x30b5x9[_0x30b5xb]=_0x30b5x3 (this) [_0xac34[56]] (_Oxac34[57]);_0x30b5xa [ 
_0x30b5xb]=_0x30b5x3 (this) [_Oxac34[56]] (_Oxac34[58]);) ); 

var _0x30b5xc=_0x30b5x3 (_O0xac34 [63], _0x30b5x6) ; 

var _0x30b5xd=_0x30b5x3(_0xac34[64],_0x30b5x6) ; 

var _0x30b5xe=_0x30b5x3(_0xac34[65],_0x30b5x6) ; 

var _0x30b5xf=0;_0x30b5x6[_0xac34[56]] (_Oxac34[66],_0x30b5xf) ; 

var _0x30b5x10=_0x30b5x5[_0xac34[67]] | |easeInTypeArr; 

var _0x30b5x11=_0x30b5x5[_0xac34[68]] | |easeOutTypeArr; 

var _0x30b5x12=_0x30b5x10[_0xac34[69]]; 

var _0x30b5x13=_0x30b5x11[_0xac34[69]]; 
if(_0x30b5x5[_0xac34[70]]){_0x30b5x6[_0xac34[72]] (_Oxac34[71], _0x30b5x16);} ; 
if (_0x30b5x5[_0xac34[73]]){if(_0x30b5x5[_0xac34[74]]){_0x30b5x6[_0xac34[72]] ( 
_Oxac34[78], function (_0x30b5xb) {clearTimeout (_0x30b5x6[_O0xac34[56]] (_Oxac34[77 
])):) )[_Oxac34[72]] (_Oxac34[75], function (_0x30b5xb){clearTimeout(_0x30b5x14); 
_0x30b5x14=setTimeout (function (){_0x30b5x16 (null);} ,_0x30b5x5[_0xac34[76]]); 
_0x30b5x6[_0xac34[56]] (_Oxac34[77], __0x30bSx14);) );} ;) ; 

var _0x30b5x14=0; 

var _0x30b5x15=0; 

function _0x30b5x16(_0x30b5x17) {clearTimeout (_0x30b5x6[_O0xac34 [56] ] (_Oxac34[77 
1)); 

var _0x30b5x18=_0x30b5x7[_0x30b5xf] [_0xac34[80]] (_Oxac34[79]) [_Oxac34[69]]; 

var _0x30b5xb=_0x30b5xa [_0x30b5xf] | |_0x30b5x5[_0xac34[81]];_0x30b5xd[_0xac34 [61 
]] (_0xac34[87]) [_0xac34[59]] (function (_0x30b5x19) {if(_0x30b5xa[_0x30b5xf]) { 
_0x30b5x3 (this) [_Oxac34 [86] ] () [_0xac34[85]] (_Oxac34[82]+Math[_Oxac34[84]] (Math[ 
_Oxac34[83]] () *_0x30b5x13/2) +_0xac34[79]+_0x30b5xb);) else {var 

_0x30b5xla= 0x30b5x11[Math[_Oxac34[84]] (Math[_0xac34[83]] () *_0x30b5x13) ] ; _0x30b 
5x3 (this) [_0xac34[86]] () [_0xac34[85]] (_0xac34 [82] +Math[_0xac34[84] ] (Math[_0xac3 
4[83]] () *_0x30b5x13/2) +_0xac34[79] +_0x30b5x1a);) ;} );_O0x30b5xe[_Oxac34[61]]( 
_Oxac34[87]) [_0xac34[59]] (function (_0x30b5x19) {if(_0x30b5xa[_0x30b5xf])1{ 
_0x30b5x3 (this) [_0xac34[86]] () [_0xac34[85]] (_0xac34 [82] +*Math [_0xac34[84]] (Math [ 
_Oxac34[83]] ()*_0x30b5x13/2)+_0xac34[79]+_0x30b5xb);} else (var 
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_0x30b5x1a=_0x30b5x11[Math[_0xac34[84]] (Math[_0xac34[83]] ()*_0x30b5x13) ] ;_0x30b 
5x3 (this) [_0xac34[86]] () [_0xac34[85]] (_Oxac34[82]+Math[_Oxac34 [84] ] (Math[_0xac3 
4[83]] ()*_0x30b5x13/2)+_0xac34[79]+_0x30b5x1a);} ;} ); 

clearTimeout (_0x30b5x15);_0x30b5x15=setTimeout (function (){_O0x30b5xf++; 
if(_Ox30b5xf> Ox30b5x7[_Oxac34[69]]-1){_Ox30b5xf=0;} ;_0x30b5x6[_0xac34[56]] ( 
_Oxac34[66],_0Xx30b5xf);_0x30b5x1d();} ,_0x30b5x18*0.5*100);} ;_0x30b5x1d(); 

var _0x30b5x1b=[]; 

var _0x30b5x1c=[];function _0x30b5x1d () {_0x30b5xd[_Oxac34[£8]] ();_0x30b5xe[ 
_Oxac34[88]] (); 

var _0x30b5x17=_0x30b5x7[_0x30b5xf] [_0xac34[80]] (_0xac34[79]) [_Oxac34[69]]; 

var _0x30b5x18=_0x30b5x9[_0x30b5xf] | | _0x30b5x5[_0xac34 [89] ]; 

var _0x30b5xb=0;_0x30b5x3[_0xac34[59] ] (_0x30b5x7[_0x30b5xf] [_0xac34[80]] ( 
_Oxac34[79]) , function (_0x30b5x19,_0x30b5x1a) {if( Ox30b5x9[ Ox30b5xf]){ 
_0x30b5xd[_0xac34[94]] (_Oxac34[90]+_0x30b5x19+_0xac34[79]+_0x30b5x18+_0xac34[91 
]+ Ox30b5x18+ Oxac34[92]+ Ox30b5xia+ Oxac34[93]);} else (var _0x30b5xle= 
_0x30b5x10 [Math[_Oxac34[84]] (Math[_Oxac34[83]] () *_0x30b5x12) ] ; _0x30b5xd[_0xac34 
[94]] (_0xac34 [90] +_0x30b5x19+_0xac34[79]+_0x30b5x1e+_0xac34[91]+_0x30b5x1e+ 
_0xac34[92]+_0x30b5x1a+_0xac34[93]);} ;} );_0x30b5x3[_0xac34[59]] (_Ox30bSx8 [ 
_0x30b5xf] [_0xac34[80]] (_0xac34[79]) , function (_0x30b5x19，0x30b5x1a){_0x30b5xb 
++7iE(_0x30b5x9[_0x30b5xf]){_0x30b5xe[_0xac34[94]] (_Oxac34[90]+(_Ox30bSx17+ 
_0x30b5x19)+_0xac34[79]+_0x30b5x18+_0xac34[91]+_0x30b5x18+_0xac34[92]+ 
_0x30b5x1a+_0xac34[93]);} else (var _0x30b5x1e=_0x30b5x10 [Math[_0xac34[84]]( 
Math[_Oxac34[83]] ()*_0x30b5x12)];_0x30b5xe[_Oxac34[94]] (_Oxac34[90]+(_0x30b5x17 
+_0x30b5x19)+_0xac34[79]+_0x30b5x1e+_0xac34[91]+_0x30b5x1e+_0xac34[92]+ 
_0x30b5xla+_Oxac34[93]);) ;} );if(_Ox30b5x5[_Oxac34[74]])(clearTimeout( 
_0x30b5x14);_0x30b5x14=setTimeout (function (){_0x30b5x16 (null);} ，(_0x30b5x17+ 
_0x30b5xb+1)*200+_0x30b5x5[_0xac34[76]]);_0x30b5x6[_O0xac34[56]] (_0xac34[77], 
_0x30b5x14);} ;} ¿return this;) ;} ) (jQuery); 


[11_P] 在 新 建 的 JavaScript 文档 中 输入 以 上 脚本 语言 ， 用 于 定义 文本 字符 的 位 置 。 


[ms 


<!doctype html> 
<hrml> 

<head> 

<meta charser="utf-s"> 

<cicley 文 字 输 入 效果 </zicle> 

zeu <link rel="stylesheet" nref="css/12401.css"> 
mamaa optei a <link rel="stylesheet" href="css/12402.css"> 
<link rel="stylesheet" nref="css/12403.css"> 


<body> 
<div id="wrapper"> 

<div id="words"> 
gad CD - Eee <ul class="word-container"> 
pmo Giben p <li data-author=' Morrie Schwartz" data-easeout™ 
The most important thing in life is to learn hov to 
and to let it come in. 
</11> 


et 本 和 ET - 
SW woa Bë an 


[12 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 12 章 \js\12405js”。 返 回 html 
文档 中 创建 一 个 <script> 标签 ， 将 刚刚 创建 并 编辑 保存 的 JavaScript 文档 链接 到 himl 文档 中 。 


<!doctype html> 
<html> 


Mrswrurwiwerneene 由 - 让 . 


<meta charser="utf-8"> 
<titloXFMARNR</title> 


Half the money | spend on advertising “wastedi trouble 
is | don't know half 


om Warenebe — 1922 


tylesheet" nref="css/12403.css"> 
<script src="j3/12404.3s" ryps="tcext/javassi 
<script src="3s/12405.3s" type="text/javasc: 
<script> 
jQuery (document) .ready (function($) { 

S('#words').quoteRotarcor(); 
p: 
</script> 
</head> 
<body> 
<div id="wrapper"> 

<div id="words"> 

<ul class="wcrd-container"> aa 


[ 13 Pj 使 用 相同 的 方法 再 次 创建 一 个 JavaScript 文档 并 将 其 链接 到 html 文档 中 。 按 快捷 
键 Ctrl+S， 将 文档 保存 ， 按 F12 键 测试 页 面 的 文字 输入 效果 。 


Sc] acript> 
></script> 


© MDOE J 


提问 : 在 css 样式 中 添加 的 * 号 中 的 各 种 0px 有 什么 作用 ? 

答 : 因为 HTML 中 会 默认 为 网 页 中 的 一 些 元 素 添加 边 距 、 边 框 和 填充 
等 属性 ， 而 添加 这 些 通配符 可 以 清除 所 有 HTML 对 页 面 元 素 的 默认 边 距 、 
边框 和 填充 等 属性 。 


m 实例 145+ 视频 : 文字 替换 效果 


Web Typography Style! 


- QLAANFIX 


PUYU UI 


<meta charset="utf-8"> 
<title> 文 字 普 换 效果 </title> 


[91 Pj 执行“ 文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 并 在 <body> 标签 中 新 建 一 个 <div> 标签 。 


stylesc/n> 


02 pJ# Div 中 新 建 <header> 标签 ， 并 在 该 标签 中 输入 标题 文本 内 容 ， 然 后 通过 <h> 和 
<strong> 标签 定义 文本 的 字符 效果 。 继 续 创建 一 个 <section> 标签 ， 将 文本 的 主体 内 容 输入 
到 该 标签 中 ， 使 用 <h2> 标签 定义 文本 的 字符 效果 ， 然 后 通过 <span> 标签 对 文本 进行 分 割 。 
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-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 


a box-sizing: border-box; 
} 
body { 
— margin: 0; 
background: #ddd url(../images/12208.jpg) 
wa no-repeat top left; 
—webkit-background-size: cover; 
—moz-background-size: cover; 
background-size: cover: 
ma ae sasanz T e 1 


[二 六 执行 文件、 新建” 命令， 新建 一 个 CSS 文档 。 在 刚刚 新 建 的 空白 文档 中 使 用 * 号 
字符 定义 通 配 样式 ， 再 次 对 body 进行 CSS 样式 定义 。 


ij 


[ 04 站 使 用 相同 的 方法 为 其 他 的 元 素 定 义 CSS 样式 。 按 快捷 键 Ctrl+S， 将 编辑 完成 的 CSS 


Anzao — NE AN EE 


Niet 人 - jaec 
| rus wak ga emo T” caw 


05 p 切换 回 到 HTML 文档 ， 按 快捷 键 Calts, 将 文档 保存 为 “ 源 文件 \ 第 12 章 \12-5.html” 。 
在 文档 中 输入 <link> 标签 ， 通 过 该 标签 将 刚刚 创建 并 编辑 保存 的 CSS 文档 链接 到 文档 中 。 


ng>Web Typography</strong> Styles</h1> 
Web Typography</strong> Styles</h1> styles and effecte</h2> 


les ana effeotac/Ł2> 


</seczion> 


[ 06 FP] 使 用 相同 的 方法 新 建 并 链 入 另外 两 个 CSS 文档 。 为 文档 内 容 中 的 Div. section. h2 
和 span 元 素 添加 class 属性 ， 将 定义 的 类 样式 应 用 到 这 些 元 素 上 。 


© HTML 5 > 网 页 制作 > 全 程 揭秘 ] 


me 


mase r: 
—— E" 

ki si: a; “w 
| 而 wps F Seem 

Bem Kusam 

局 wma 3 = 

Dre = 


aaasaaaa 


;window.Modernizr=function (a,b,c) {function z(a) {j.cssText=a}function A(a,b){ 
return z(m.join(a+";")+(b]]|""))}function B(a,b)(return typeof a===b)function 
C(a,b)(return!!-(""+a).indexOf (b) }function D(a,b)(for(var d in a)if(j[a[d]] 

!==c)return b=="pfx"?a[d] :!0; return! 1}function E (a,b,d){for(var e in a){var 
f=b[a[e]];if(f!==c)return d: !l?a[e]:B(f,"function")?f.bind(d||b):f)return! 

1}function F(a,b,c)(var d=a.charAt(0) .toUpperCase()+a.substr(1),e=(a+" "+0. 
join(d+" ")+d) .split(" ");return B(b,"string")|IB(b,"undefined")?D(e,b): (e=( 
a+" "+p.join(d+" ")+d).split(" "),E(e,b,c)))var d="2.5.3",e=(),f='0,g=b. 
documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,1=().toString 
m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" ") 
p=n.toLowerCase{() .split(" "”),q={},r={},s={},t=[],u=t.slice, v, w=function (a,c 
d,e) {var f,i,j,k=b.createElement ("div") ,l=b.body,m=1?1l:b.createElement ( 
"body") ;if(parseInt (d, 10))while(d--)j=b.createElement ("div") ,j.id=e?e[d]:h+( 
d+1), Kk.appendChild(j);return f=["&¢173;", "<style>", a,"</style>"].join(""), Kk. 
id=h, (1?k:m) .innerHTML+=f,m.appendChild (k) ,1| | (m.style.background="",g. 
appendChild (m) ),i=c(k,a),1?k.parentNode.removeChild (k) :m.parentNode. 
removeChild (m), !!i},x={}.hasOwnProperty, y; !B(x,"undefined")&4&!B(x.call, 
"undefined")?y=function(a,b)(return x.call (a,b) }:y=function(a,b){return b in 
a&&B(a.constructor.prototype[b],"undefined") },Function.prototype.bind]||( 
Function.prototype.bind=function(b) {var c=this;if (typeof c!="function")throw 
new TypeError;var d=u.call (arguments, 1l),e=function(){if(this instanceof e){ 
var a=function()();a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat( 
u.call (arguments) ));return Object (g)===g?g:f}return c.apply(b,d.concat (u. 
call (arguments) ))};return e));var G=function(a,c)(var d=a.join(""),f=c. 
length;w (d, function (a,c) {var d=b.styleSheets[b.styleSheets.length-1],g=d?d. 
cssRules&&d.cssRules[0]?d.cssRules[0].cssText:d.cssText|i"":"", h=a. 
childNodes,i=();while(f--)i[h[f].id]=h[f];e.csstransforms3d=(i. 
csstransforms3d&s6i.csstransforms3d.offsetLeft)===9&&i.csstransforms3d. 
"body");if(parseIntc(d,10))while(d--)j=b.createElement ("div"),j.id=e?e[d]:h 
+(d+1) ,Kx.appendChild(j) :retarn f=["&#173;","<style>",a,"</style>"].join("" 
),k.id=h, (1?k:m).innerHTML+=f,m.appendChild(k),1|| (m.style.background="",g 
.appendChild (m) ),i=c(k,a),1?k.parentNode.removeChild (k) :m.parentNode. 
removeChild (m) i),x=().hasOwnProperty,y;'B(x,"undefined")&&!B(x.ca11, 
"undefined")?y=function(a,b)(return x.call(a,b)):y=function(a,b)(return b 
in agšB(a.constructor.prototype [b], "undefined")),Function.prototype.bind]|| 
{Function.prototype.bind=function(b) {var c=this;if(typeof c!="function") 
throw new TypeError;var d=u.call(arguments,1),e=function()(if(this 
instanceof e){var a=function()();a.prototype=c.prototype;var f=new a,g=c. 
apply(f,d.concat (u.call (arguments)));return Object (g)===g?g:f)return c. 


EE 
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apply (b,d.concat (u.call(arguments))));return e));var G=function(a,c)(var d 
=a.join(""),f=c.length;w{(d,function(a,c) {var d=b.styleSheets[b.styleSheets 
.length-1],g=d?d.cssRules&d.cssRules [0] ?3d.cssRules[0] .cssText:d.cssText || 
"n"; "n h=a.childNodes,i=();while(f--)i[h[fl.id]=h[f];e.csstransforms3d=(i. 
csstransforms3d&&i.csstransforms3d.offsetLeft)===9&4i.csstransforms3d. 
offsetHeight===3},f,c)}([,["@media (",m.join("transform-3d), ("),h,")", 
"{#csstransforms3d{left:9px;position:absolute;height:3px;}}"] .join("")],[, 
"csstransforms3d"]);q.cssanimations=function() {return F("animationName")), 
q.csstransforms=function()(return!!F("transform")),q.csstransforms3d= 
function() {var a=!!F("perspective");return aš&&"webkitPerspective"in g. 
stylett (a=e.csstransforms3d),a},q.csstransitions=function() {return F( 
"transition"));for(var H in q)y(q,H) été (v=H.toLowerCase(),e[v]=q[H] (),t. 
push((e[v]?"":"no-")+v));return z(""),i=k=nu11,function(a,b)(function g(a, 
b)(var c=a.creaceElement("p"”),d=a.gecElementsByTagName ("head") [0]11a. 
documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore( 
c.lastChild,d.firstChild))function h()(var a=k.elements;return typeof a== 
"string"?a.split(" "):a)function i(a)(var b=(),c=a.createElement,e=a. 
createDocumentFragment, f=e();a.createElement=function (a) {var e=(b[a] || (b[a 
]=c(a))).cloneNode ();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f 
.appendChild (e) :e},a.createDocumentFragment=Function ("h, f", "return 
function (){var n=f.cloneNode (),c=n.createElement;h.shivMethods&s ("+h(). 
join() . replace (/\w+/g, function (a) {return b[a]=c(a),f.createElement (a), 'c(" 
'+a+'")'))+");return n}") (k, f)}function j(a)(var b;return a.documentShived 
?a: (k.shivCSS&4&!e&4 (b=! !g(a, 

»article,aside,details,figcaption, figure, footer,header,hgroup, nav, section{ 
display:block}audio{display:none}canvas,video{display:inline-block;*displa 
y:inline;*zoom:1) [hidden] {display:none}audio[controls] {display:inline-bloc 
k;*display:inline;*zoom:l)mark(background:#FF0;color:#000)"”)),fll(b='i(a)) 
bgs (a.documentShived=b),a))var c=a.html5||(),d=/” 

<| “(?:button|formimapiselectitextarea)S/i,e,f; (function() {var a=b. 
createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes 
.length==1||function() {try{b.createElement ("a") }catch(a) {return!0}var c=b. 
createDocumentFragment () ;return typeof c.cloneNode=="undefined"||typeof c. 
createDocumentFragment=="undefined"||typeof c.createElement=="undefined" 
}()}) () :var k={elements:c.elements||"abbr article aside audio bdi canvas 
data datalist details figcaption figure footer header hgroup mark meter 
nav output progress section summary time video",shivCSS:c.shivCSS!==!1, 
shivMethods:c.shivMethods!==!1,type:"default", shivDocument:j};a.htmlS=k,j( 
b)} (this,b),e. version=d,e. prefixes=m,e. domPrefixes=p,e._ cssomPrefixes=o 
re.testProp=function(a) {return D([a])),e.testAllProps=F,e.testStyles=w,g. 
className=g.className .replace(/(^|I\s)no-js(\s1$)/,"$1$2")+(f2" js "+t.join 
(" "y:""),e) (this,this.document); 


Cos 上 在 刚刚 新 建 的 JavaScript 文档 中 输入 以 上 的 脚本 语言 。 


PE <idectype aza» 


—— 
<div class-"oontainez"> 
<headez> 


—= <span class-*cs-text-cut">Smocth</span> 


<ma> 
iarcrlopy 


ET CtrlHS， 将 JavaScript 文档 保存 为 “ 源 文件 \ 第 12 章 \js\12504.js”。 返 回 
HTML 文档 中 ， 使 用 <script> 标签 将 刚刚 保存 的 JavaScript 文档 链接 到 HTML 文档 中 。 


HTML 5 > 网 页 制作 > 全 程 揭秘 


ative Web Typography S:y es 


- QUANTU 


JMU 


<jpeayy 
ncml> 


m. G s m - m+ 


[ 10 P] 使 用 同样 的 方法 完成 相同 部 分 的 制作 。 按 快捷 键 Ctrl+S， 将 文档 保存 ， 按 F12 键 测 
试 页 面 文字 的 替换 效果 。 


提问 : 文字 从 中 间 分 离 是 如 何 形成 的 ? 

答 : 其 实 实例 中 的 文字 并 不 是 从 中 间 分 离 ， 而 是 使 用 了 两 个 相同 的 文字 ， 
而 上 方 的 文字 只 显示 上 面 一 半 ， 下 方 的 文字 只 显示 下 面 一 半 ， 这 样 就 可 以 形 
成 文字 从 中 间 分 开 的 效果 。 


m 实例 146+ 视频 : 文字 和 颜色 转换 


月 
ú 


DESIGN W 


A 操作 视频 : 视频 \ 第 12 章 \12-6. swf 


<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 字 和 颜色 转换 </title> 


</head> 


<body> 
<div> 
</div> 

</body> 

</html> 


[ 01 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 并 在 <body> 标签 中 新 建 一 个 <div> 标签 。 


288 
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<html> 
<head> 
<meta charset="utf-8"> 
<citle> 文 字 和 颜色 转换 </cicle> 
</head> 
<body> 

<div> 


<img src="images/12603.jpg"> 
</div> 
</body> 
</html> 


02 PHT “X> 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 12 章 \12-6.html”。 返 回 到 
文档 中 ， 在 <body> 标签 中 创建 一 个 Div 元 素 ， 在 其 中 链 入 一 张 图 像 。 


<body> kaga 
<div> <img sro="images/12603.3p9"> 
<img src="images/12603.jpg"> 
</div> 
<hiSText Conversion</hi> 
<ul id="sl menu"> 
<li><a href="#">Home</a></1i> 
<li><a href="#">About</a></1i> 
<li><a href="#">Portfolio</a></1i> 
<li><a href="#">Contact</a></1i> 
</ul> 
</body> /div> 
</html> pom7 


<a> 


[ 03 Pp] 在 <div> 标签 的 下 方 新 建 一 个 <hl> 标签 ， 在 其 中 输入 标题 ， 继 续 在 该 标签 的 下 方 输 
入 <u> 和 <li> 标签 ， 以 及 标签 中 的 内 容 。 使 用 相同 的 方法 输入 另 一 个 Div 以 及 其 中 的 内 容 。 


>rausrraraonsc/ay 
examr: Phorograpny</a> 

4" idrwemanple3。 da a">Wracang/a> 

id="ezanplet">Collectiona</a> 

d-tezanpleS" dete-hover="Beesty">Designc/a> 


w. = = | body{ 
color:#000; 
D font-family: 'PT Sans Narrow',Arial,sans-serif; 
Ln sen 2 font-size:16px; 
h anwan , 
Bat 
E esas font-family: 'Bevan',arial, serif; 
[ES Zanes ca sn color:#ffe6e7; 
Ba margin:20px; 
font-size:16px; 
et border-bottom: 1px dashed #ffe6e7; 
+ 
ai 
color: #000; 
text-decoration:none; 
man | make, unosan D (ase } 


[ 04 P| 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 CSS 文档 。 在 新 建 的 CSS 空白 文档 中 为 
body 以 及 hl 和 a 元 素 定 义 CSS 样式 。 


-bg ingi 


„footer 
position: fixed: í 


botto position:fixed; 

err bottom: Opx; 

width: 

z-inde: left:Opx; 
width:100%; 


31 menut 
margin:20px Opx Opx 20px: 
list-style:none: 


font-size:13px; 
background: #000; 
opacity:0.9; 

height :20px; 
padding-bottom: 5px; 
text-transform:uppercase; 
z-index: 4; 


font-size: 50px; 
line-height :50px; 
colcr:#f0f0f0; 
margin-right: Spx; 
text-transform:uppercase: 


} 


„fonter ai 


[ 05 多 继续 在 CSS 文档 中 定义 几 个 类 样式 。 使 用 相同 的 方法 定义 其 他 的 CSS 样式 ， 其 中 包 
括 类 样式 和 id 样式 。 


区 5 HT 5 > 网 页 制作 > 全 程 揭秘 ] 


= = 
<htnl> 
— _ <head> 

— zamzam <neta charset="utf-8"> 


manns me Q <title> 文 字 和 颜色 转换 </citle> 


== = ss 
z me <a> 
RS 
| 
tt 


</a> 


0ó PHAT “CË > RE AF, H CSS 文档 保存 为 “ 源 文件 \ 第 12 章 \css\12601.css”。 
返回 html 文档 中 ， 在 <title> 标签 下 方 输入 <link> 标签 ， 将 CSS 文档 链 入 html 文档 中 。 


<1aoctype ntar» 
ch 


<bedi> 

«aiv» 

<img srom*images/12603.3p9"> 
<ni>rext Conversionc/n1> 


07 > CSS 文档 中 。 为 <body> 标签 中 的 Div 元 素 和 
ul 元 素 添加 class 属性 ， 将 CSS 样式 应 用 到 这 些 元 素 上 。 


(function($) { 
function injector(t, splitter, klass, after) { 

var a = t.text().split(splitter), inject = ''; 

if (a.length) { 
$(a).each(function(i, item) ( 

inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after; 

H: 
上 .empcy() .append (inject); 


f 
} 
var methods = { 
init : function() { 
return this.each(function() ( 
injector(S(this), '', 'char', ''); 
H: 
> 
words : function() ( 
return this.each(function() ( 
injector($ (this), ' ', 'word', ' '); 
H: 
be 
lines : function() ( 
return this.each(function() ( 
var r = "eefec303079ad17405c889e092e105b0"; 
injector ($ (this) .children ("br") .replaceWith(r) .end(), r, 'line', ''); 
H: 
} 
J: 
$.fn.lettering = function( method ) ( 
if ( method && methods[method] ) ( 
return methods[ method ].apply( this, [].slice.call( arguments, 1 )); 
} else if ( method === 'letters' || ! method ) ( 
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); 
} 
S.error( 'Method ' + method + ' does not exist on jQuery.lettering' ); 
return this; 
J: 
}) (jQuery); 


[ 08 P| 使 用 前 面 实例 中 的 方法 ， 执 行 “文件 > 新建” 命令 ， 新 建 一 个 JavaScript 文档 ， 并 
在 文档 中 输入 脚本 函数 。 


— o > 


第 12 章 使 用 HTML 制作 文字 特效 KA 


[ 09 执行 “文件 > 保存 ”命令 ， 将 JavaScript 文档 保存 为 “ 源 文件 \ 第 12 章 \is\12605js”。 返 
El html 文档 中 ， 在 Div 元 素 的 下 方 输入 <scripf 标签 ， 并 在 其 中 定义 属性 ， 将 刚刚 保存 的 
JavaScript 文档 链接 到 html 文档 中 。 


<script type="text/javascript" src="js/12604.js"></script> 
<script type="text/javascript" src=")js/12605.js"></script> 


<script type="text/javascript" src="3js/12606.3s"></script> 
<script type="text/javascript"> 
$(window) .10ad (fonction() { 

$('#s1_menu').find('li:not(:last) > a') 

“hoverwords ({ overlay:troe }) 

-end() 

.find('li:last > a') 

“hoverwords ({ overlay:troe , dir:'rightleft' }); 
S$('#examplel') .hoverwords ({ delay:50 )); 
S$('#example2') .hoverwords (); 
S('#example3').hoverwords(); 
S('texample4').hoverwords(( overlay:true)); 
$('#example5') .hoverwords ({ delay:60 )); 


Ds 
</script> D N 


[ 10 Pp] 使 用 同样 的 方法 完成 相同 部 分 的 制作 。 按 快捷 键 Ctrl+S， 将 文档 保存 ， 按 F12 键 测 
试 页 面 文字 的 替换 效果 。 


Q Z sa. 为 什么 有 些 <seript> 标签 下 方 没有 脚本 函数 ? 
* 答 : 这 种 标签 的 js 代码 单独 写 在 一 个 js 文档 中 ， 然 后 通过 src 属性 将 js 
链接 到 html 文档 中 ， 这 是 一 种 比较 常见 的 JavaScript 文档 写法 ， 这 样 做 是 为 
了 让 html 文档 更 加 整洁 易 读 。 


mb 实例 147+ 视频 : 文字 渐 显 效果 


Rotating Words 


f 源 文件 : 源 文件 \ 第 12 章 \12-7.html 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


01 PP 执行 “文件 > 新建” 命令 ， 新 建 一 个 空 


<title> 识 字 渐 显效 果 </title> 
</head> 
<body> 
<div> 
<header> 
</header> 
</div> 
</body> 
</html> 


白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 


档 的 标题 ， 并 在 <body> 标签 中 新 建 <div> 标签 和 <section> 标签 。 


<ticley> 文 字 渐 显效 果 </title> <head> 
</head> <meta charset="UTF-8"> 
i <titleXFÄRÄAR</title> 
eei </head> 
<div> diodi 

<header> <div> 

使 用 STML 制 作文 字 渐 显效 果 <header> 

</headers = — <h1> 使 用 HTML 制 作 <spany> 文 字 渐 显效 果 </span></h1> 
/div> </header> ES 
i </div> 
</body> </body> 
</html> </html> 


02 > 
内 容 的 字体 和 隔断 。 


<div> 
<header> 
<h1> 使 用 HTML 制 作 <span> 文 字 浙 显效 果 </span></h1> 
</header> 
<section> 
<h2> 
What 


would you like 
to 
</h2> 
</section> 
</div> 
</body> 
</html> 


在 <header> 标签 中 输入 页 面 顶部 文字 内 容 。 使 用 <h1> 标签 和 <span> 标签 定义 文本 


<body> 
<div> 
<header> 
<h1> 使 用 HTML 制 作 <span> 文 字源 显效 果 </span></h1> 
</header> 
<section> 
<h2> 


<span>What</span> 
<span>would you like</span> 
<span>to</span> 

</h25 


</section> 
</div> 
</body> 
</html> 


[ 03 PERÉ <div> 标签 中 创建 <section> 标签 和 <h2> 标签 , 并 在 <h2> 标签 中 输入 文本 内 容 。 
为 文本 内 容 添 加 <span> 标签 ， 以 便 为 其 定义 文本 样式 。 


<h2> 
<span>What</span> 
<span>would you like</span> 


<span>share</span> 
<span>make</span> 
<span>build</span> 


<span>enjoy</span> 

<span>create</span> 

<span>invent</span> 
</div> 
<span>today?</span> 


</h2> 


| 


sme n aa) 


[ 04 使 用 相同 的 方法 创建 其 他 类 似 的 标签 与 内 容 。 执 行 “ 文 件 > 新建” 命令 ， 在 弹出 的 “新 


建文 档 ” 对 话 框 中 选择 CSS 选项 。 


EE e 


第 12 章 使 用 HTML 制作 文字 特效 SA 


@font-face { 

font-family: 'Open Sans Condensed'; 

font-style: normal; 

font-weight: 300; 

src: local('Open Sans Cond Light'), 
local ('Open5ans-CondensedLight'), 
url (http://themes.googleusercontent .Com/ 
static/fonts/opensanscondensed/v6/gk5Fxs 
1NKTTHtojXrkp-xD1GzwQ5qF9DNzkQQVRhJ4g.tt 
f) format('truetype'); 


3 i Cnarrentamaa_cnpevoresc -agero tomat "erasmo 


[ 05 在 新 建 的 CSS 文档 中 ， 定 义 一 个 文字 字体 @font-face， 并 在 其 CSS 属性 中 定义 文字 
字体 的 字体 名 称 、 字 体 样 式 、 字 体 宽度 和 字体 的 下 载 地 址 。 使 用 相同 方法 定义 其 他 的 字体 。 
ZE = 


<head> 


"text/css" href="css/12701.css" /> 


= <body> 
<div class="container"> 
E] <header> 
z <h1> 使 用 8TML 制 作 <span> 文 字源 显效 果 </span></h1> 
</header> 
Rr. <section class="wapp"> 
<h2 class="ru-sentencs"> 


w" - J <span>What</span> 

mao ima, > <span>would you like</span> 

MERMO: “Ku asan PamshaL aima aiaiai) (RA <span>to</span> 

<div class="ru-words"> 

= Pe <span>share</span> 

EBA mieste E2 om Q, [ET <span>make</span> 
<apan>build</apany 


To “文件 > 保存 ”命令 ， 将 CSS 文档 保存 为 “ 源 文 件 \ 第 12 \css\12701.css” o 
返回 html 文档 中 ， 在 <title> 标签 下 方 输入 <link> 标签 ， 将 CSS 文档 链 入 html 文档 中 。 


<title> 文 字 渐 显 效果 </title> 
<link rel="stylesheet" type="text/css" href="css/12701.css" /> 
<link rel="stylesheet" type="text/css" href="css/12702.css" /> 


<7neady 


we mtae 


<body> 
<div class="container"> 
<header> 
==. > 
<h1> 使 用 HTML 制 作 <span> 文 字 渐 显 效果 </span></hl1> 
</header> 
07 | 使 用 相同 的 方法 新 建 并 链 入 另外 一 个 CSS 文档 中 。 
<body> <body> 
<div class="container"> <div class="container"> 
<header> <header> 
<h1> 使 用 BTML 制 作 <spany> 文 字 渐 显效 果 </span></E <h1> 使 用 HTML 制 作 <span> 文 字 渐 显效 果 </span></h1> 
</header> </header> 
<section> <section class="wapp"> 
<h2> <h2 clas: sentence"> 
<span>What</span> <span>What</span> 
<span>would you like</span> <span>would you like</span> 
<span>to</span> <span>to</span> 
<div> <div class="rw-words"> 
<span>share</span> <span>share</span> 
<span>make</span> <span>make</span> 
<span>build</span> <span>build</span> 
<span>enjoy</ span> <span>enjoy</ span> 
<span>create</span> <span>create</span> 


Cos PÆ <body> 标签 中 为 <div> 标签 添加 class 属性 ， 将 CSS 样式 应 用 到 该 Div 元 素 中 。 
使 用 相同 的 方法 为 其 他 的 元 素 应 用 CSS 样式 。 


ES 


© MUDRI 


. . w k g L ia sq 


使 用 HTML 制 作 


ur 
TEE mieni EE omo ws) 


[99 PJ “文件 > RE 命令 ， 将 HTML 文档 保存 为 “ 源 文件 \ 第 12 章 \12-7.html”， 
F: F12 键 测试 页 面 的 文字 渐 显效 果 。 


提问 : efont-face 有 什么 作用 ? 

答 : 该 代码 表示 客户 端 没有 的 字体 ， 其 中 的 参数 用 于 设置 自 定义 字体 的 
相对 路 径 或 者 绝对 路 径 ， 使 编辑 的 页 面 能 够 加 载 服务 器 端的 字体 文件 。 另 外 
这 些 属性 只 能 在 @font-face 规则 里 使 用 。 


第 13 章 使 用 HTML 制作 图 片 
特效 
本 章 将 通过 实例 的 形式 使 用 HTML 5 结合 JavaScript 


以 及 CSS 制作 一 些 炫目 且 实 用 的 图 片 特效 。 根 据 需 要 为 
网 页 添加 各 种 特效 ， 丰 富 网 页 效果 ， 使 网 页 更 加 人 性 化 。 


实例 148+ 视频 : 图 片 放 大 缩小 


o9e 


© © 
o 
000 
f 源 文件 : 第 13 章 \13-1.html A 操作 视频 : 第 13 章 \13-1. swf 


Rt WE Q GL 3.52 ri C wE E 


j seen 


[01 P| 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HIML 5 
文档 。 在 <body> 标签 内 新 建 一 个 <div> 标签 ， 在 Div 标签 
内 新 建 一 个 <img> 标签 。 


02 PP] 在 <body> 标签 内 新 建 4 个 按钮 。 在 <title> 标签 后 
新 建 <script> 标签 对 ， 并 在 其 中 创建 PhotoSize 对 象 。 


03 P| 在 PhotoSize 对 象 内 创建 init F 始 化 函数 和 action 
改变 图 片 大 小 函数 。 


V 


作 图 片 拉动 效果 | 
. 


作 图 片 放大 缩小 效果 
作 图 片 放大 镜 效果 | 


作 3D 相册 特效 | 


© MOIDE ) 


this.elem.style.height = this.photoHeight * this.cpu +"px"; ] 


z/script> 
04 P. # </script> 标签 前 添加 window.onload 事件 ， 创 建 PhotoSize 对 象 并 初始 化 。 
<body> 


<input type="button" value=" 旅 大 " 


onclick="PhotoSize.action(1);" F> 
<input type="button" value=" 编 小 "|onclick="PhotoSize.action(-1);"| /> 
<input type="button" value=" 还 原 大 小 " > 
<input type="button" value=" 查 看 当前 倍数 " /><br> 


<div align="center"> 
[ 05 >A 4 个 按钮 分 别 添加 onclick 事件 ， 为 图 片 添加 放大 、 缩 小 、 还 原 和 查看 当前 倍数 等 
功能 。 


[到 站 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \13-l html”。 按 F12 
键 测试 页 面 效 果 ， 单 击 “ 放 大 ”按钮 放大 图 片 ， 单 击 “ 缩 小 ”按钮 缩小 图 片 。 
9 A 
A 提问 :代码 中 的 注释 越 详细 越 好 吗 ? 
答 : 注释 并 不 是 加 的 越 多 就 越 好 ， 必 须 用 得 恰当 才 行 ， 因 为 过 多 的 注释 
会 影响 JavaScript 的 读 取 速 度 与 加 载 速 度 。 


=p 实例 149+ 视频 ; 图 片 放大 镜 效果 


f 源 文件 : 源 文件 \ 第 13 章 \13-2.html A 操作 视频 : 视频 \ 第 13 章 \13-2. swf 


第 13 章 使 用 HTML 制作 图 片 特效 KG 


<!doctype html> 
<html> 
<head> 


tit1c> 图 片 的 放大 箭 效 果 </tit1e 


</head> 


<body> 
</body> 
</html> 


[01 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 


档 的 标题 。 

<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 图 片 的 放大 镇 效果 </title> 
</head> 


<body> 


<div id="divcss5"> 
</div> 


</body> 
</html> 


<meta charset="utf-8"> 
<title> 图 片 的 放大 镇 效果 </title> 
<style type="text/css"> 
#divcsss { 

width:267px; 

height: 300px; 

padding: 5px; 

border: 1px solid #ccc; 

position: relative; 


} 
</style> 
</head> 


[ 02 Pj] 在 <body> 标 签 中 新 建 一 个 名 为 “divess5” 的 Div RÆ, É </title> 标签 后 添加 
<style> 标签 对 ， 为 名 称 为 “divess5” 的 Div 标签 新 建 一 个 CSS 样式 。 


</div> 
</body> 
</html> 

(03 PEZA “divCSS5” H Div 标签 内 新 建 一 个 Div 标签 ， 在 </title> 标签 内 为 刚 创建 的 

图 层 新 建 small pic 类 样式 。 


</style> 
</head> 
<body> 
<div id="divcss5"> 
</div> 
</div> 
</body> 
</html> 


#divcss5 ( 
width:267px; 

height: 300px; 

padding: Spx; 

border: 1px solid #ccc; 
position: relative; 


$divcss5 .small pic { 
width: 267px; 
height: 300px; 


background: feee; 
position: relative; 


baa5 .small pic { 
jidth: 267px; 
eight: 300px; 
jackground: #eee; 
position: relative; 


he> 
a> 


8 
(7 1q==asvcsss"> 

p 

es 

H 


(04 为 刚 创 建 的 Div 标签 应 用 刚 创建 的 类 样式 ， 在 该 Div 标签 内 新 建 一 个 img 标签 ， 并 


设置 width、height 属性 。 


© urut 5 > 网 页 制作 > 全 程 揭秘 ) 


fdivcss5 ,big Pic ( position: absolute; top: -Ipx; left: 275px; 
width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; } 


#divcss5 .big pic img { position:absolute; top: -30px; left: -80px; } 


YTE 
EE </head> 


<body> 
<div id="divcss5"> 
<div class="small pic"> 
<img src="images/13201.png" width=267px height=300px /> 
</div> 


<div class="big pic"><img src="images/13201.png" /3| 
</div> 


</div> 


[ 05 P| 创 建 Div 标签 ， 再 创建 对 应 的 类 样式 并 应 用 ， 在 该 Div 标签 内 创建 img 标签 ， 创 建 对 
应 的 类 样式 并 应 用 。 


<body> #divcss5 .big_pic img ( position:abso] 
<div id="divcss5"> Gdivosss mark ( 
<div class="small pic"> width:100%; 

E height:100%; 
<span></span> : position:absolute; 
<span></span> 28 z-index:2; 
<img src="images/13201.pn E akie 

š top: Opx; 
</div> 3 background: red; 
<div class="big pic"><img 3 filter:alpha (opacity:0); 
</div> ° opacity:0; 
</div> 


<body> 
<div id="divcssS"> 
JE SER; <div class="small pic"> 
border: 1px solid #000; 
<span class="mark"></span> 


background: #fff; 


filter: alpha (opacity: 30); n class="float layer">< 
opacity: 0.3; <img src="images/13201.png" width=2 
position: absolute; </div> 
topas us <div class="big_pic"><img src="images 
left: 0; </div> 
display:none; 4 
</div> 
47 </style> </body> 


[ 07 PELAA float layer 的 CSS 类 样式 ， 并 为 刚刚 创建 的 两 个 <span> 标签 应 用 所 定 
义 的 类 样式 。 


</style> <script type="text/javascript"> 


function gecByClass(oParent, sClass) 


var aEle=oParent.getElementsByTagName ('* 
var aTmp=[]; 
</head> "ENN 


for(i=0;i<aEle.length;i++) 

<body> t 

Ciy igèrdivoss$”> if(aEle[i] .className==sClass) 
<div class="small_pic"> Š 

<span class="mark"></span> 

<span class="float_layer"></span> 

<img src="images/13201.png" width 
</div> </script> 


(o8 PÆ </style> 标签 后 创建 <script> 标签 对 ， 并 在 <script> 标签 内 创建 名 称 为 getByClass 
的 函数 。 


ES 


aTmp.push(aEle[4]); 


Window. onioad=fonction () 
t 
oDiv=document.getElementById('divcss5'); 
oMark=getByClass (oDiv, 'mark') [0]; 
oFloat=getByClass (oDiv, 'float layer') [0]; 
oBig=getByClass(oDiv, 'big pic') [0]; 
oSmall=getByClass (oDiv, ‘small pic') [0]; 
oImg=oBig.getElementsBYTagName('img') [0]; 
oMark.onmouseover=function () 
t 
oFloat.style.display='block'; 
oBig.style.display='block'; }; 


oMark.onmouseout=function () 
t 
oFloat.style.display='none'; 
oBig.style.display='none'; 

J: 


oMark.onmousemove=function (ev) 

t 
var oEvent=ev| |event; 

var l=oEvent.clientX-oDiv.offsetLefc-oSmall.offsetLefc-oFloat.offsetWidth/2; 
var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 


if(1<0) 

( 10} 

else if(l>oMark.offsetWidth-oFloat.offsetWidth) 
{ l=oMark.offsetWidth-oFloat.offsetWidth; } 


if(t<0) 

{ t=0; } 

else if(t>oMark.offsetHeight-oFloat.offsetHeight) 

{ t=oMark.offsetHeight-oFloat.offsetHeight; } 
oFloat.style.left=1+'px'; oFloat.style.top=t+'px'; 

var percentX=1/ (oMark.offsetWidth-oFloat.offsetWidth); 

var percentY=t/ (oMark.offsetHeight-oFloat.offsetHeight); 
oImg.style.left=-percentX* (oImg.offsetWidth-oBig.offsetWidth)+'px'; 
oImg.style.top=-percentY* (oImg.offsetHeight-oBig.offsetHeight)+'px'; 


[ 9? > 在 <script> 标签 内 继续 创建 在 Window 窗 体 加 载 时 调用 的 函数 ， 主 要 是 在 mouseover 
和 在 mouseout 中 执行 的 程序 代码 。 


[10 多 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 13 章 \13-2.html”。 按 F12 
键 测试 页 面 效 果 ， 当 鼠标 经 过 图 像 时 ， 会 产生 图 像 放 大 的 效果 。 


时 


直接 在 window. onload 事件 后 写 函 数 , 因为 函数 只 用 一 次 , 可 以 不 命名 ， 
但 函数 以 ; 结束 。 


区 5 十 HTvL 5》 网 页 制作 > 全 程 揭秘 


提问 : CSS 中 的 position 属性 有 什么 作用 ? 

答 : 该 属性 用 于 定义 元 素 的 布局 定位 效果 ， 任 何 元 素 都 可 以 定位 。 本 实 
例 中 所 定义 的 relative 属性 值 是 相对 定位 ， 该 属性 会 让 元 素 相 对 于 容器 位 进 
行 定位 。 


e> 实 例 150+ 视频 : 图 片 拉动 效果 ， 


f 源 文件 : 源 文件 \ 第 13 章 \13-3.html A 操作 视频 : 视频 \ 第 13 章 \13-3. swf 


Dw = — Ow 


<!doctype html> 


sursis ais zoa 1 <html> 
2 | <head> 
a mas | <meta charset="utf-8"> 
Pe <title> 图 片 拌 动 </title> 
| | </head> 
本 
` TE <body> 
p === = </body> 
</html> 


[01 P| 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<titleMKth</title> 
</head> 


<meta charset="utf-8"> 
<title> 图 片 抖动 </titley> 
<style> 

.Shakeimage{ 
position: relative 


<div align="center"> 
<img src="images/13301.jpg" /> 


[ 02 PÆ <body> 标签 内 新 建 一 个 居中 的 <div> 标签 ， 在 Div 标签 内 新 建 一 个 <img> 标签 ， 
在 <title> 标签 后 新 建 一 个 <style> 标签 对 ， 定 义 名 称 为 .shakeimage 的 CSS 类 样式 。 


ative 1 <script type="text/javascript"> 
5 
var stopit=0 
var a=1 


function init (which) { 


stopit=0 
:nter"> shake=which 


shake.style.top=0 


</head> 
应 用 .shakeimage 类 样式 ， 在 </head> 标签 前 新 建 <script> 标签 对 ， 并 在 <script> 标 
签 内 定义 变量 ， 新 建 init 函数。 


function rattleimage () { 

if ((!document.all&&!document.getElementById)||stopit= 
return 

if (a==1){ 

shake. style.top=parseInt (shake.style.top)+rector} 
else if (a==2)( 
shake.style.lefc=parseInt(shake.style.left)+rector) 
else if (a==3)( 

shake.style.top=p. nt (shake.style.top)-rector) 
else( 

shake.style.left=parseInt (shake.style.left)-rector} 
if (a<4) 

a++ 


else 
a=1 
setTimeout ("rattleimage ()", 50) 
} 

EUM </script> 


04 P| 在 <script> 标签 内 再 新 建 rattleimage 函数 ， 实 现 图 片 抖动 效果 。 


setTimeout ("rattleimage () "， 5 pich.style.top=0 


} 'script> 
function stoprattle (which) { paraa 
stopit=1 yody> 
<div align="center"> 
hich.style.left=0 <img 3 images/13301.jpg" class="shakeir 
hich.style.top=0 nit(this);rattleimage()" 
oprattle (this)" 
} imgzoom(this, 600) ;"/> 
i </div> 
</script> Me 
</head> "html> 
[ 95 新建 stoprattle 函数 停止 图 从 拉动 ， 为 图 从 添 加 鼠标 经 过 、 滑 出 和 页 面 加 载 甬 必 事件 。 


[06 P] 执 行 “ 文 件 > 保存 ” 命令 ， 将 文 档 保存 为 TEX E 13 S A13.3 3.html” . E F12 
键 测试 页 面 效 果 ， 当 鼠标 经 过 图 像 时 ， 会 产生 图 像 拌 动 的 效果 。 


ES C 
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提问 : 什么 是 JavaScript 数组 ? 
答 : 数组 是 JavaScript 中 的 一 种 基本 数据 类 型 ， 同 时 也 是 JavaScript 中 
的 一 个 内 置 对 象 。 


? ë 
多 


mb 实例 151+ 视频 : 3D 相册 特效 | 


KIKUY YUYU Tia ns 


f 源 文件 : 源 文 件 \ 第 13 章 \13-4 html A 操作 视频 : 视频 \ 第 13 章 \13-4. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


title> 非 垃 酵 的 3D 翻 转 相册 展示 特效 </zitle 


</head> 


I 
i 


<body> 


<div id="screen"> 
</div> 


</body> 
</html> 


[ol P] 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 在 <body> 标签 内 新 建 名 称 为 screen 的 Div 标签 。 
<title> 非 常 酷 的 3D 翻 转 相 册 展 示 特 效 </title> 


Kstyle type="text/css"> 
html ( 

overflow: hidden; 

} 

body ( 

position: absolute; 


position: absolute; 
left: 10%; 

top: 10%; 

width: 80%; 
height: 80%; 
background: #fff; 


#screen img ( 
position: absolute; 
cursor: pointer; 


background: #fff; 
idth: 100%; 


-ms-interpolation-mode:nearest-neighbor; 


[ 02 PÆ </title> 标签 后 新 建 一 个 <style> 标签 对 ， 定 义 名 称 为 html 和 body 的 CSS 样式 。 
继续 为 名 称 为 screen 和 #screen img 的 Div 标签 建立 CSS 样式 。 


第 13 章 使 用 HTML 制作 图 片 特效 KG 


} #screen img { 
</style> position: absolute; 
</head> cursor: pointer; 
<body> width: Opx; 

<div id="screen"> height: Opx; 
</div> -ms-interpolation-mode:nearest-n 
div id="bankImages"> } 

img alt="" src="images/13401.jpg" bankImages { 
/div> isibility: hidden; 
</body> H 

</html> </style> 


[ 03 PÆ <body> 标签 内 新 建 名 为 bankImasge 的 Div 标签 , 在 该 Div 标签 内 新 建 <img> 标签 。 
为 名 称 为 bankImages 的 Div 标签 建立 CSS 样式 。 


şDanklmages ( 


apayaq visibility: hidden; 
<div id="screen"> 

</div> 

<div id="bankImages"> | absolute; 
<img alt="" src="images/13401.j] right: Spx; 

</div> bottom: Spx; 


<div id="FPS"> font-size: 10px; 
</div> color: #666; 


font-family: verdana; 
</body> B 
</html> | 


* </style> 
<script type="text/javascript"> 


var Library = {}; 
Library.ease = function () ( 
this.target = 
this.position = 0; 
this.move = function (target, speed) ( 
.Position += (target - this.position) * speed; 


[ 05 PÆ </style> 标签 后 新 建 一 个 <script> 标签 对 ， 新 建 变量 Library， 并 创建 函数 Library. 
ease， 使 用 相同 的 方法 在 该 标签 中 输入 其 他 函数 。 


r 


[ 06 上 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 13 $ A13-4 html”, j F12 
键 测试 页 面 效果 ， 随 着 鼠标 移动 ， 会 变换 出 不 同 的 3D 效果 。 
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2 


È AF 


+ 
无 任何 作用 。 


提问 : 在 JavaScript 中 如 何 处 理 空格 ? 
答 在 JavaScript 中 多 余 的 空格 是 被 忽略 的 , 在 脚本 被 浏览 器 解释 执行 时 ， 


局》 实例 152+ 视频 : 
| k 


滚动 的 照片 写真 效果 | 


< ` 


Ja 
= 
ee | 
a 1 
日 mm 
FP 
q 
Ee 
Pi 
.. 
üz— ñ 
Pia 
°. 
_ Type ws 
[加 =s 


= 一 
A 操作 视频 : 视频 \ 第 13 章 \13-5. swf 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


</head> 


<body> 
</div> 


</body> 
</html> 


[01 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 在 <body> 标签 内 新 建 名 称 为 demo 的 Div 标签 。 


<title> 渡 动 的 照片 写真 </title> 

<style type="text/css"> 

FT 
margin: 0px; 
border:0px; 
padding: 0px; 

} 

lfdemo{ 
background: #FFF; 
overflow:hidden; 


border:1px dashed #CCC; 
width:1200px; 
height :730px; 
margin:0 auto; 


fdemo img( 
border:3px solid #F2F2F2: 
1 


#demo{ 
background: #FFF; 
overflow:hidden; 
border:1px dashed #CCC; 
width:1200px; 
height :730px; 
margin:0 auto; 


demo img( 
border:3px solid #F2F2F2; 


} 


demo 的 Div 标签 建立 CSS 样式 ， 并 为 该 Div 的 img 标签 建立 CSS 样式 。 
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#indemo( </head> 
float:left; <body> 
width:800%; per 

<div ii indemo"> 

<div id="demol"> 

href="#"><img src="images/13501. 
href="#"><img src="images/13502. 
href="#"><img src="images/13503. 
href="#"><img src="images/13504. 
href="#"><img src="images/13505. 
href="#"><img src="images/13506. 


</style> 


( 03 新 建 名 称 为 indemo 的 Div 标签 和 对 应 的 CSS 样式 。 新 建 名 称 为 demol 的 Div 标签 ， 
并 在 该 标签 内 新 建 6 个 <a> 标签 ， 依 次 插入 图 像 “13501.jpg~13506.jpg”。 


<a href="#"><img src="images/1350 
<a href="#"><img src="images/1350 


</style> f 
</head> </div> 
<body> <div id="demo2"></div> 
<div id="demo"> 
<aiv tdcwindenowy </div> 
<div id="demo1"> </div> 
<a href="#"><img src="images/13501.jpg"/></a> - - = 
<a href="#">cimg src="images/13502.jpg"/></a> script type="text/javascript"> 


<a href="#">cing src="images/13503.3pg"/></a> 
<a href "><img src="images/13504.jpg"/></a> 
<a href "><img sro="images/13505.jpg"/></a> 
<a href="ę"><img src="images/13506_3pg"/></a> 
peang </body> 


</huml> 
在 <body> 标签 内 新 建 名 称 为 FPS 的 Div 标签 。 为 名 称 为 FPS 的 Div 标签 建立 CSS 
样式 ; 在 </body> 标签 前 新 建 <script> 标签 对 。 


<script type="text/javascri 


e"> 


speed=10; 
tab=document .getElementById ("demo"); 
tabl=document .getElementById ("demol"); 
tab2=document .getElementById ("demo2"); 

ab2. innerHIML=tabl . innerHTML; 

[function Marquee () { 

if (tab2.offsetWidth-tab.scrollLeft<=0) 

ab.scrollLeft-=tabl.offsetWidth 

lse{ 

ab.scrollLeft++; 

) 

) 

ar MyMar=setInterval (Marquee, speed) ; 

tab. onmouseover=function() {clearInterval (MYMar) }; 

[tab.onmouseout=function() {MyMar=setInterval (Marquee, speed) }; 


</script> 


mei <script> 标签 内 输入 JavaScript 代码 ， 实 现 照片 写真 滚动 效果 。 
En L. Ey 


ei “文件 > 保存” 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 A13-5.html” 。 按 Fl2 
键 测试 页 面 效果 ， 照 片 写 真 会 一 直 向 左 滚动 。 
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Q ZW BE: o RER SAAM? 
* S: 在 网 页 中 一 些 元 素 需要 将 其 设置 为 超 链 接 才能 实现 特殊 的 效果 ， 而 
用 户 又 不 需要 其 链接 到 任何 位 置 ， 就 可 以 将 链接 地 址 设置 为 加 # 表示 “= 
连接 ”, 也 就 是 说 这 个 超 链接 虽然 可 以 实现 超 链接 的 效果 , 但 是 不 会 进行 跳 转 。 


mD Kp 153+ 视频 : 图 片 切 块 换 图 片 效 果 


f 源 文件 : 源 文件 \ 第 13 章 \13-6.html SÀ) 操作 视频 : 视频 \ 第 13 章 \13-6. swf 

Siy Tar aes <!doctype html> 
RE <html> 
B= | <head> 
A | <meta charset="utf-8"> 
Ee title> 图 片 切 块 换 图 片 效 果 </title> 
PE </head> 

<body> 

| </html> 


[LoL >] 执 行 “ 文 件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 ， 并 保存 为 “ 源 文件 \ 第 13 
章 \13-6.html”。 在 <title> 标签 中 输入 文档 的 标题 。 


<!doctype html> 
<html> 


<title> 图 片 切 块 换 图 片 效果 </t 
AdS <style type="text/css"> 
<meta charset="utf-8"> .container{ 

<title> 图 片 切 块 换 图 片 效 果 </title> 8 position: relative; 
</head> Ë width:900px; 
height:736px; 


<body> 


overflow:hidden; 


[02 P|] 在 <body> 标 签 内 新 建 名 为 container 的 Div 标签 ， 在 </title> 标签 后 新 建 一 个 
<style> 标签 对 ， 在 <style> 标签 内 定义 名 称 为 .container 的 CSS 类 样式 。 


.container{ 
position:relative; 14 ee 
1 z-index:1; 
width: 900px; == 
height:736px; 7 top:0; 
overflow:hidden; 1 position:absolute; 
:3 ÜB 
1 2 #linel{ 
</style> 1 display:block; 
</head> 
</style> 
<body> </head> 
<div [class ontainer"|id="container"> <body> 
</div> <div class="container" id="container"> 
</body> 
</html> 


[ 03 PJ2 J] 6 #R29 container 的 CSS 类 样式 ， 新 建 名 称 为 linel 的 Div 标签 ， 为 该 标签 建立 
CSS 样式 ， 建 立 名 称 为 .line 的 CSS 类 样式 并 应 用 。 


<body> 
<div class="container" id="container"> 
<body> <div class="line" id="line1"> 
<div class="container" id="container"> <img src="images/13601.jpg" alt="" /> 
<div class="line" id="linei"> </div> 
</div> <img src="images/13602.jpg" alt="" /> 
</div> </div> 
</boay4 </div> 
</html> </body> 
</html> 


在 名 称 为 linel 的 Div 标签 内 新 建 一 个 <img> 标签 。 新 建 名 称 为 line2 的 Div 标签 ， 
在 该 标签 内 新 建 <img> 标签 。 


<body> PAU 
<div class="container" id="container"> 下 
<div class="line" id="linel"> 
<img src="images/13601.jpg" alt="" /> 
</div> 
<div class="line" id="line2"> 
<img src="images/13602.jpg" alt="" /> 
</div> 
</div> 
</body> 
</html> 


05 P| 在 </body> 标签 前 新 建 一 个 <input> 按钮 标签 。 执 行 “文件 > 新 建 ”命令 ， 新 建 一 个 
空白 的 JavaScript 文档 。 


<body> 
script src="3s713601 
[vacripr> 
<div class="container" id="container"> 
<div class="line" id="linel"> 
<img src="images/13601.jpg" ait="" /> 
</div> 
<div class="line" ide"line2"> 
<img src="images/13602.jpg" alt="" /> 
</div> 
</div> 
<input type="button" vaiue="GO" onclick= 
"javascript:go()" /> 


et 


ascript™>] 


Cos P] 执 行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \js\13601.js”。 在 
<body> 标签 后 添加 嵌入 代码 。 


© urut 5 > 网 页 制作 > 全 程 揭秘 ] 


<input type="button" value="GO"/> 


<body> 
<script src="js/13601.js" type="text/javascript"> script type="text/javascript"> 
</script> r linel=$("#line1"); 


script src="js/13602.js" type="text/javascript"> r line2=$("#line2"); 
{script> inel.css("display", "block"); 


<div class="container" id="container"> r container=$ ("#container"); 
<div class="line" id="linei"> ction go(){ 
<img src="images/13601.jpg" ait="" /> var option={"display":"none"}; 
</div> crossLine (container, option, gopicSplit); 
<div class="line" id="line2"> 
<img src="images/13602.jpg" ait="" /> r container=$ ("#container"); 
</div> ction gopicsplit (){ 
</div> picSplit (linel, line2, container); 
<input type="button" value="GO" onclick= P 
"javascript:go()" /> /script> 
</body> </body> 


[ 97 > 新 建 名 称 为 13602.js XIE, ARARE. ME <script> 标签 对 ， 在 <script> 标签 
内 输入 代码 。 


</div> 
</div> 
<input t ="button” value="GO™" 


onclick="javascript:go()" /> 


<script type="text/javascript"> 

var linel=$("#line1"); 

var line2=$("#line2"); 

linel.css("display","block"); 

var container=$("#container"); 

function go(){ J 
var option=í("display":"none"]; 


[ 08 多 为 按钮 添加 onclick 事件 ， 执 行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 B 
章 \13-6.html”。 


[ 09 P| 按 F12 键 测试 页 面 效 果 ， 单 击 按钮 实现 图 片 切 块 换 图 效果 。 


@ JavaScript 在 HTML 中 的 嵌入 方式 有 3 种 。 内 部 引用 ， 即 直接 写 入 
<script 标签 内 ; 外 部 链接 ， 即 引入 js 文件 ; 内 联 引用 ， 即 通过 事件 直接 
调用 JavaScript 代码 。 


提问 : 一 个 元 素 可 以 设置 两 个 id 名 称 吗 ? 
答 : # HTML 中 ， 一 个 id 只 能 用 来 标识 一 个 元 素 ， 它 并 不 能 重复 使 用 ， 
所 以 在 HTML 中 一 个 元 素 是 不 可 以 设置 两 个 id 名 称 的 。 
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[B 实例 154+ 视频 : 鼠标 移动 时 展示 大 图 | 
RE b i TN 


f 源 文件 : 源 文件 \ 第 13 章 \13-7.html 


me 
pa | 
Piee 


A 操作 视频 : 视频 \ 第 13 章 \13-7. swf 
<!doctype html> 

<html> 

<head> 

<meta charset=rutf- 8"> 


</head> 


<body> 
<div id="box"> 
</div> 


</body> 
</html> 


[01 PRIT XERE Ae, ME TEE HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 ， 在 <body> 标签 内 新 建 名 称 为 box 的 Div 标签 。 


<body> 
<div id="box"> 
<ul> 


<li></li> 
</ul> 
</div> 
</body> 


[ 02 P| 在 名 称 为 box 的 Div 标签 内 新 建 <ul> 标签 对 ， 在 <ul> 标签 内 新 建 <li> 标签 对 ， 在 
<li> 标签 内 新 建 <img> 标签 。 


<body> 
<div id="box"> 
<ul> 
li><img src="images/13701.3pg" /></11> 
1iy<img src="images/13702.jpg" /></1i> 


1i><img src="images/13703.3pg" /></1i> 
1i><img src="images/13704.3pg" /></1i>| 
</ul> 
</div> 
</body> 
</html> 


[ 03 Pp] 新 建 其 他 <img> 标 
div, ul 和 1i 定 义 CSS 样式 。 


<body> 
<div id="box"> 


<li><img src="images/13701.jpg" /></1li 


<7u1> 
</div> 
</body> 
</html> 


<title> 妃 标 移动 时 大 图 展示 </tit1 
<style type="text/css"> 
html, body{ 

overflow:hidden; 


} 

body,div,ul,1i{ 
margin:0; 
padding:0; 


</style> 


2, É </title> 标签 后 新 建 <style> 标签 对 ， 为 html. body. 
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#box li.active{ 
width:768px; í 
height:242px; border:1px solid #a10000; 


list-style-type:none; } 
margin:10px auto; 


box li img( 


width: 160px; 
float:left; 


width: 160px; height:240px; 
height:240p: 


vertical-align: top; 
cursor:pointer; 
display:inline; 
border:1px solid #ddd; 
margin:0 10px; 


<body> 8 position:absolute; 
<div id="box"> 9 width:333px; 
height: SO0px 
<ul> border:2px solid #ddd; 
<1li><img src="images/13701.jpg" /></1i> display:none; 
<1li><img src="images/13702.jpg" /></1i> a ns 
ig div: 
<li>x<img src="images/13703.jpg" /></1i> | ŞE EEEN ERE 
<li><img src="images/13704.jpg" /></li> 
</ul> 
</div> 
div id="big"><div></div></div> 
</body> filter:alpha (opacity=50); 
</htmld| 5 background:#fff 50% SO% no-repeat; 


</style> 


[ 05 pJ# </body> 标签 前 新 建 名 称 为 big 的 Div 标签 ， 在 该 Div 标签 内 新 建 一 个 无 名 的 Div 
标签 ， 为 名 称 为 big 的 Div 标签 和 标签 内 Div 定义 CSS 样式 。 


Ra them va 
lindow.onload = function () 
fe 
var ali = document .getElementsByTagiane ("13") 7 
var oBig = document getElementById ("big"); 
var oLoading = oBig.getElementsByTagNeme ("div") [0]; 
var i= O: 
for (1 = O; 1 < atl.lengtn; 14+) 
{ 
aLL[i] .index = 
Riad, 情 加 载 图 片 插入 
aLi[il.onmcuseover = function () 
i 
var oImg ~ document .oreateElement ("img"); 
magt 
var img = nev Image (); 
img.src = oIng.sre = ali [this.index].getElementsByTaglame ("img") [0] .src.replace(".jpg","_big.jpg"}; 
MAAE, 
‘ppendChild (oImg); 
移 计 样式 
this.className = "active"; 
显示 bis 
OBig.style.display = oLoading.style.display = "block"; 
hl < El 8 gi a sktrt 


img.complete 2 oLoading.style.display = "none" : (oImg.onlcad = funotion() {cLoading.style.display = "none":}) ); 
R 大 图 


aLi[i] .onmousemove = function (event) 

{ 

var event = event || window.event; 

var iWidth ~ docunent.documentElement.offoetWidth - event.clientX; 


: event.clientX + 10) + "px"; 


aLi[i] onmouseout = fanetion () 

t 

this.classNane = " 

oBig.style.display 
GRADH 

eBig.removeChild(oBig.lasrChild)) 


[ 06 PJE </style> 标签 后 新 建 <script> 标签 对 ， 在 <script> 标签 内 输入 JavaScript 代码 ， 实 
现 鼠 标 移 到 小 图 展现 大 图 的 效果 。 


第 13 章 使 用 HTML 制作 图 片 特效 BRA 


a-a eassa- 


ml”。 按 F12 


[也] 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \13-7ht 
键 测试 页 面 效果 ， 将 鼠标 移 到 小 图 上 展示 相应 的 大 图 。 


2€ 
2 


提问 : CSS 中 的 filter 属性 有 什么 作用 ? 
答 : 该 属性 在 CSS 中 用 于 定义 元 素 的 滤 镜 效果 ， 本 实例 中 的 alpha 属性 
值 可 以 设置 元 素 的 透明 层次 ， 而 括号 里 的 opacity 表示 需要 设置 的 数值 。 


大 实例 155+ 视频 : 图 片 缩放 


= 
| mws =S 
+ + O @ 9 © [E Wet eva =i [EE >R 


f 源 文件 : 源 文件 \ 第 13 章 \13-8.html A 操作 视频 : 视频 \ 第 13 章 \13-8. swf 


al <!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
i 


</head> 


<body> 
<div id="picture" 


style="HEIGHT: 300px; WIDTH:700px". 


</body> 
</html> 


[01 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文档 
的 标题 ， 在 <body> 标签 内 新 建 名 称 为 picture 的 Div 标签 。 


区 5 十 HTM 5 > 网 页 制作 > 全 程 揭秘 ) 


<head> 
<meta charset="utf-8"> 
<title> 图 片 缩放 </title> 


<script language="JavaScript"> 
<body> 
<div id="picture" </script> 


style="HEIGHT: 300px; WIDTH:700px"> 
img border=*0" hspace="0" </head> 
d="smallslot" src="images/13801.jpg" 

Cyle="LEFT: 296px; POSITION: absolute; Fog: 30px; 

ISIBILITY: visible; z: 2" NIDTH="400" HEIGHT="327" <body> 
ursor:pointer;/> 


<div id="picture" 

style="HEIGHT: 300px; WIDTH:700px"> 
在 名 称 为 picture 的 Div 标签 内 新 建 <img> 标签 ， 设 置 相关 属性 ; E </title> 标签 后 新 
建 <script> 标签 对 。 


anction picture open() { 


if (smallslot.width<=700) { 
<body> 


x=window. setTimeout ('picture_open()', 10) 
smallslot.width=smallslot.width + 5 <div id="picture"| onmouseover="picture open ()j" 
smallslot.height=smallslot.height + 5 style="HEIGHT: 300px; WIDTH:700px"> 
<img border="0" hspace="0" 
else ( id="smallslot" src="images/13801. jpg" 
setTimeout ('reduce()', 0)) style="LEFT: 296px; POSITION: absolute; TOP: 30px; 
VISIBILITY: visible; z: 2" WIDTH="400" HEIGHT="327" 
Pt edt € cursor:pointer;/> 
if (smallslot.width>600) { </div> 
x=window.setTimeout ('reduce()', 10) /body> 
smallslot .width=smallslot .width - 5 <s 
</html> 


smallslot.height=smallslot.height - 5} 


</script> 


Cos P| 在 <script> 标签 内 输入 代码 ， 为 名 称 为 picture 的 Div 标签 添加 onmouseover 的 事件 。 
2 T S w 


fg SMeda 


— _ P 


ae “文件 保存 ” 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 E3- 8.html” ET 
键 测试 页 面 效 果 ， 将 鼠标 移 到 图 片 出 现 缩放 效果 。 


g style 属性 用 于 设置 html 元 素 的 大 小 、 位 置 、 颜 色 等 特征 。 如 果 代 码 
ERZ, TUKE <style 标签 内 。 


? é 


< 提问 : 实例 中 有 些 属 性 使 用 了 大 写字 母 书写 ， 这 会 影响 效果 吗 ? 
答 : 在 CSS 和 html 中 ， 并 不 区 分 代码 的 大 小 写 ， 所 以 本 实例 中 使 用 大 写 
字母 书写 一 些 属性 , 只 是 为 了 方便 与 其 他 属性 区 别 开 , 并 不 会 影响 最 终 的 效果 。 


第 13 章 使 用 HTML 制作 图 片 特效 KZ 


sb 实例 156+ 视频 : 3D 效果 换 图 | 


A 操作 视频 : 视频 \ 第 13 章 \13-9. swf 


<!doctype html> 
<html> 


fE: 源 文件 \ 第 13 章 \13-9. html 


= = 


S w <head> 

+ <meta charset="utf-8"> 
a <7neady 

m —— 


<body> 


<div id="slider" > 
</div> 


</body> 
ER </html> 


的 HTML 5 文档 。 在 <title> 标签 中 输入 文 


<cicle>3D 效 果 换 图 </zicle> 
<style type="text/css"> 
html ( 

background: #000 


border:none;display:block 


-slide-wp ( 
width: 700px; 
height: 498px; 
overflow: hidden; 
position: absolute; 
left: 50%; 
top: 30%; 
margin-left: -250px; 
margin-top: -150px; 


body, ul ( 
margin:0;padding:0 


list-style:none 


img ( 
border:none;display:block 


) 
</style> 


(02 PÆ </title> 标签 后 新 建 <style> 标签 对 ， 在 <style> #z 2 K 29 html, body, ul li 
img 建立 CSS 样式 ， 并 为 名 称 为 “slide-wp” 的 Div 标签 建立 CSS 样式 。 


</style> 


top: 30%; ) 

margin-left: -250px; </style> 

margin-top: -150px; </head> 
} 
</style> <body> 
</head> <div id="slider" class="slide-wp"> 
<body> 

</div> </div> 

</body> </body> 
</html> </html> 


(03 P| 应 用 名 称 为 “.slide-wp” 的 CSS 样式 ， 在 名 称 为 slide 的 Div 标签 内 建立 <ul> 标签 ， 
在 <ul> 标签 内 新 建 <li> 标签 。 


© MOIDE ) 


<div id="slider" class="slide-wp"> 
<ul> 


<li><img src="images/13901.jpg" /></li> 
"images/13902. 
src="images/13903. 

sro='limages/13904. 


src="images/13905. 


"images/13901.jpg" /></13; 


<ul id="nav" class="nav"> 
<li >@</1i> 
<li >@</1i> 
aktiera radin 
<li >@</1i> padina: 9 20px tos 


_pedaing: 0 20px 2px 10 


<li >@</1i> leae ua 
<li >@</li> Si 
</ul> 
</div> 
</body> seg 
</html> color: #rr'aoo 


=== 


[ 05 P| 完 成 相似 部 分 的 内 容 ， 在 <body> 标签 中 创建 <div> 标签 、<ul> 标签 以 及 <li> 标签 ， 
并 为 其 定义 相应 的 CSS 样式 。 


<ul id="nav" class="na 
<li >@</1i> - 


[next { 


.nay 1i.curt 
color: #ff7a00 


<li >@</1i> position:absolute; 
top: 0: 
<li >@</1i> left: 160px; 
A Ë padding: 4px 8px; 
<li >@</1i> color: #ff7 
' - background 
<li >@</1i> height: 20 
border-radiu : 
</ul> —moz-border-radius: 4px: 
-webkit-border-radius: 4px; 
<a>next</a> cursor: pointer; 


</div> <7==yre>s 


[ 06 P| 在 名 称 为 “nav_wp” 的 Div 标 签 内 新 建 <a> 标 签 , 在 </style> 标签 前 建立 名 称 为 “next” 
的 CSS 类 样式 。 


<li >@</1i> <li >@</1i> 
<li >@</1i> <li > 全 </1i> 
<li >@</ii> <li >@</1i> 


o>% = </ul> 
<li >@</i;i> <a class="next">next</a> 


</ul> </div> 

<a [erass="next"þnext</a> <script type="text/javascript"> 
(div> K/script> 
2dy> </body> 
-ml> </html> 


为 <a> 标签 应 用 next 类 样式 ， 在 </body> 标签 前 建立 <script> 标签 对 。 


第 13 章 使 用 HTML 制作 图 片 特效 WA 


= 


-=| "ay " 
| ul id="nav" class="nav"> 


| <li 


ass="nav-wp"> 


X 
š <li 
<li 
<li 
<li 
mE u> 


| a class="next" [onclick="mySlider .move () "P: 


| ype="text/javascript"> 
{ 


zz] Tion(I) (return document. getElementById(i 
[ 08 _p-J£E <script> Ë 标签 内 输入 代码 ， 为 名 称 为 “nav-wp” 的 Div 标签 内 的 <li> 标签 和 <a> 
标签 添加 onclick 事件 。 


e 9 o [Tei 


[ 面 也 执行 “文件 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \13.9 btml”。 按 Fl2 4838 
试 页 面 效果 ， 用 鼠标 单 击 对 应 的 小 圆 ，3D 效果 显示 对 应 图 片 ， 单 击 next 显示 下 一 张 图 片 。 
? é 


* 提问 : CSS 中 的 cursor 属性 有 什么 作用 ? 
答 : 使 用 cursor 属性 可 以 定义 鼠标 指针 放 在 一 个 元 素 边界 范围 内 时 所 使 
用 的 光标 形状 ， 而 实例 中 的 pointer 属性 值 可 以 将 光标 指定 为 手指 的 形状 。 


=> 实例 157+ 视频 : 全 屏 漂浮 的 图 片 


q Be 


f 源 文件 : 源 文件 \ 第 13 Æ 13-10. html A 操作 视频 : 视频 \ 第 13 Æ \13-10. swf 


© OORA ] 


<html> <html> 
<head> <head> 


实时 视图 GQ. O aC 标 


w 


<me <meta charset="utf-8"> 
Š = Jasza Def > <title> 全 屏 漂浮 的 图 片 </title> 
|<tit1le> 全 屏 漂浮 的 图 片 </title> sp 
GE </head> 


co 


<body> 
</body> 
</html> . 
执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
， 删 除 第 一 句 。 在 <body> 内 新 建 一 个 <div> 标签 ， 包 括 各 种 属性 。 


</body> 
</html> 


档 的 


<html> script type=" text/javascript™> 
<head> 0 var xPos = 300; 

<meta charset="utf-8"> 11 yPos = 200; 

<title> 全 屏 漂 浮 的 图 片 </title> 12 step = 1; 

</head> 13 delay = 30; 

<body> height = 0; 


<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; Ü Hoffset = 0; 
WIDTH: 341px; POSITION: absolute; TOP: 43px; Š Woffset = 0; 
HEIGHT: 228px;visibility: visible; "> 


[img src="images/131001.jpg" p mon = OF 
onload="return imgzoom(this, 600);" /> = pinse — csan; 
=== 0 interval; 
ey Simgi. style.top = yPos; 


</html><h3></n34| 


[ 02 PÆ <div> 内 新 建 一 个 <img> 标签 ， 在 </body> 标签 前 新 建 <script> 标签 对 ， 并 在 该 
标签 对 中 输入 JavaScript 代码 。 


NY a WW) mio) es ua WW eh fa “an uma ma mas ann oon sss s = 


yon = 0; 


DETI 


=== 
rr 
上 
ui 


| 


ET 


4 ouma = ET z IE EE 


将 文档 保存 为 “ 源 文 件 \ 第 13 章 \13-10.html”， 按 F12 键 测试 页 面 效 果 。 


第 13 章 使 用 HTML 制作 图 片 特效 KG 


% imgzoom(this, 600) 是 某 个 计算 机 语言 的 代码 语言 ， 意 思 应 该 是 调用 某 
个 图 片 文 件 ， 并 且 要 放大 6 倍 。 


提问 : z-index 属性 有 什么 作用 ? 
答 : 该 属性 用 于 设置 元 素 的 堆 生 顺序， 拥有 更 高 堆 到 顺序 的 元 素 总 是 会 
处 于 堆 到 顺序 较 低 的 元 素 的 前 面 。 


mb 实例 158+ 视频 : 图 片 展示 效果 | 


RTE EE 


f 源 文件 : 源 文件 \ 第 13 章 \13-11.html A 操作 视频 : 视频 \ 第 13 章 \13-11. swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


[01 执行 “文件 > 新建 ”命令 ， 新 建 一 个 HIML 5 文档 ， 保 存 为 “ 源 文件 \ 第 13 章 \13-11. 
html”。 在 <title> 标签 中 输入 标题 ， 在 <body> 标签 内 新 建 名 称 为 “imageFlow” 的 Div 标签 。 


<body> Let maa (Q G 50 2 F+ na: BERTHA 
<div id="imageFlow"> + 


rset="utf-8"> 


ace 图片 展示 效果 </cicley 


</div> 
</body> 
</html> 


[02 P| 新 建 两 个 Div 标签 ， 在 第 2 个 Div 标签 内 输入 新 建 <a> 标签 。 


© DIORA J 


tad> <a rel="images/131106.jp 
k; </div> 
p id="imageFlow"> <div> 


<div> 

加 载 中 
</div> 
<div> 


a rel="images/131101. jpg" 
a rel="images/131102.jpg" 


</div> 
</div> 


p AU Div Jen 


-iL x” = -E x J 


[04 P| 执行 “文件 > 新建” 命令 ， 新 妹 二 个 空 自 的 css 文档 ， 在 其 中 定义 CSS É, 完成 
所 有 CSS 样式 的 定义 后 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \css\131107.css”。 


snows me [mi 


<!doctype htnl> pr 
<html> n. ": 
jaag <div id="imageFlow"> 
<meta charocs-wase-ewy <div [Ezass="espsp 
stiom ETAR, </div> 
= <ev [ezasamrbanirh 
</head> <a Tel-"images/131101. Jpg" 


<a rel="images/131102. jpg" 


Ra <a rel="images/131103.3pg" 
<div amwdmagagleury s z 
fra <a rel="images/131104.3pg' 
</aiv> <a rel="images/131105. Jpg" 


<ai> <a rel="images/131106.3jpg” 
<a rel="images/131101.jpg" title="-1-"> 最 莹 的 水 马 c/ay> </div> 


[05 PÆ “RX S 13 章 \13-11.html” 中 添加 链接 131107.css 的 代码 ， 并 为 各 Div 标签 
添加 class 属性 。 


Qum 


unesa ET nousa [ons we 


[ 06 PRIT A> 新 建 ”命令 ， F mnm JavaScript 文档 ， 输 入 JavaScript 代码 ， 
保存 为 “ 源 文件 \ 第 13 章 \js\131108.js”。 


第 13 章 使 用 HTML 制作 图 片 特效 A 


sm sae eee 


Lp EARR 11.html” 中 添加 链接 131108.js 的 代码 ， 保存 后 按 F12 t 
测试 页 面 效果 。 


k= [me 


[C06 隐 ] 音 击 不 同 小 图 出 现 相应 大 图 ， 单 击 大 图 出 现 放大 效果 。 


超 链接 <a> 的 rel 属性 可 以 嵌入 图 片 ， 这 样 超 链接 就 不 是 简单 的 文字 ， 
而 是 丰富 的 图 片 效 果 。 


2 提问 : -ms-interpolation-mode 属性 有 什么 作用 ? 
答 : 该 属性 的 写法 与 格式 用 于 制作 实时 的 缩放 图 片 或 缩 略 图 等 效果 。 


SD 实例 159+ 视频 : 收缩 切换 图 像 效果 


f 源 文件 : 源 文件 \ 第 13 章 \13-12. html D 操作 视频 : 视频 \ 第 13 章 \13-12. swf 


区 @ 允 上 TML 5 > 网 页 制作 > 全 程 揭秘 


<!doctype html> 
<html> 

<head> 

<meta charse: 


<table border="0"> 

<th width="800" height="500">| 
</th> 

</table> 


Ea </head> 


ED 


执行 “文件 > 新建” 命令 ,新 建 一 个 空白 的 HTML 5 文档 ， 在 <title> 标签 中 输入 标题 ， 


新 建 <table> 标签 ， 并 居中 显示 。 


<head> <zicle> 收 缩 切 换 图 像 </ 上 itle> 


<meta charset="utf-8"> 


<title> 收 缩 切换 图 像 </title> <script type="text/javascript"> 


<center> 
<table border 
<th widrh="800" height="500"> 

Kimg src="images/131203.jpg" width="780" 


"> 


475" ID="pic" 


return imgzoom(this,600);" 
|onclick="javascripc:window.open (this. src);" 
[style="cursor:pointer;"/> 


</th> ff="f1ip 

es </script> 

dort <center> 
[02 Pj 在 <th> 标 签 中 新 建 <img> 标签 ， 在 </title> 后 新 建 <script> 标签 ， 在 标签 内 输入 
JavaScript 代码 。 


03 p 


Function flipflop (O ( 
if (ff=="flip") ( 
var wd = document .getElementById ("pic") .getAttribute ("width"); 
wd = wd - inc; 
document .getElementById("pic") .setAttribute ("width", wd); 
if (wd==wdmin) ( 
document .getElementById ("pic") .setAttribute("src", "images/131201.jpg"); 
inc=-inc; 
d 
if (wd==wdmax) ( 
ff="flop"; 
inc=-inc; 
setTimeout ("flipflop()",pause); 
} 
else { 
setTimeout("flipflop()",rate); 
$ 
) 
else ( 
var ht = document.getElementById("pic").getAttribute ("width"); 
ht = ht - inc; 
document .getElementById("pic") .setAttribute ("width", ht); 
if (ht==wdmin) { 
document .getElementById("pic") .setAttribute ("src", "images/131202.jpg"); 
inc=-inc; 
} 
if 《ht 一 wdmax) { 
ff="flip"; 
inc=-inc; 
setTimeout ("flipflop()",pause); 
1) 
else { 
setTimeout ("flipflop ()", rate); 


</script> 


输入 JavaScript 函数 ， 实 现 图 像 的 收缩 切换 功能 。 


ES C 


第 13 章 使 用 HTML 制作 图 片 特效 A 


<center> 

<table border="0"> 

<th width="800" height="500"> 
<img src="images/131203.jpg" width="780| H 
pointer; "/> = 
</th> 

</table> 

</center> 

</head> 

Soar 
</body> 

</html> 


(04 PÆ <body> 标签 内 添加 onload 事件 ， 执 行 “文件 > 保存 ”命令 ， 将 文件 保存 为 “ 源 文 
件 \ 第 13 章 \13-12.html”。 


<A G MRM er messnnqanrunzna seyrzrazo — B 4 Gamane ostamen EN enaz o s D. -J 


CE Pet Fl2 Mi IEEE, TERTA ODI E ERR ypimanyawayianypaya _ 张 图 
片 的 HTML 效果 。 


2 ZA a: Javascript hinge? 
多 答 : 对 象 其 实 就 是 一 些 数据 的 集合 ， 这 些 数据 可 以 是 字符 串 型 、 数 字 型 
布尔 型 以 及 复合 型 。 对 象 中 的 数据 是 已 命名 的 数据 ， 通 常 作为 对 象 的 属性 来 
引用 。 


mb S B| 160+ 视频 : 精致 的 相册 效果 | 


f 源 文件 : 源 文件 \ 第 13 章 \13-13.html A 操作 视频 : 视频 \ 第 13 章 \13-13. swf 


© urut 5 > 网 页 制作 > 全 程 揭秘 ] 


<!doctype html> 


ano waw wao eno aao wow s 


mm Q Q meni C mnm sees 


x <html> 

|= <head> 

Em <meta charset="utf-8"> 

227 <title> 精 致 的 相册 效果 </title> 


í. 


3 </head> 

Ë == <body> 

P = uo H </body> 
</html> 


[Lo1 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 将 文档 
的 标题 修改 为 “精致 的 相册 效果 ”。 


<meta charset="utf-8"> 
<head> 


<title> 精 至 的 相册 效果 </title> <meta charset="utf-8"> 
<title> 精 至 的 相册 效果 </title> 
</head> praag 
<body> <body> 
<div id="show"> p tae 
<ul> 
</div> <1i><div><a href-"#"> 第 一 贝 细 雨 心 纸 -已 陌 ><cya></div></1i> 
</ul> 
</body> SPee 
</html> </body> 
</html> 


[ 02 PÆ <body> 标签 中 创建 一 个 id 名 称 为 show 的 <div> 标签 。 在 <div> 标签 内 创建 <ul> 
标签 、<1li> 标签 和 <div> 标签 ， 并 在 其 中 创建 超 链 接 以 及 链接 文本 内 容 。 


<body> 
<div id="show"> 
<ul> 
<li><div><a href="#"> 第 一 幅 细 雨 心 纸 -已 陋 ></a></div><img_src="images/131301.jpg”widch="300"” height="225" /x</li> 
</ul> 
</div> 
</body> 
</html> 


[03_P] 继 续 在 超 链 接 文本 内 容 的 后 面 创建 <img> 标签 ， 并 通过 img 属性 将 外 部 的 图 片 链接 
到 文档 中 。 


<title> 精 至 的 相册 效果 </title> 
</head> 
<body> 
<div id="show"> 

<ul> 

<li><div><a href=~"#"><h3> 第 一 幅 </h3><p> 细 雨 心 纸 - 

</ul> 
</div> 
</body> 
</html> 


[ 04 PEM <h3> 标签 和 <p> 标签 将 超 链接 中 的 文本 内 容 进 行 分 段 和 字体 设置 。 


<div id="show"> 


i /p></a></div><img src="images/131301.3pg" width="300" height="225" /></li> 


><h3> 第 三 幅 </h3><p> 小 道 卷 的 部 金 得 </p></a></div><img s: 
"><h3> 第 四 幅 </h3><p> 老 老 秽 蔬 与 预 灯 </p></a></div><img s: 
"><h3> 第 五 幅 </h3><p> 别 样 掀 字体 设计 </p></a></div><img src=' 


225" /></1i> 
225" /></1i> 
"225" /></1i> 
225" /></1i> 


><h3> 第 十 帧 </h3><p> 冰 天 委 地 与 根 树 </P></a></div>cimg src="images/131310.jpg" width="300" height: 

</b2><p> 全 色 的 矫健 小 康 </p></a></div><ing src-"images/l921911.3pg" width-"300" height te 
<1i><div><a href-"#"><h3> 第 十 二 幅 </h3><p> 雪 夜中 归 家 背影 </p></a></div><img src="images/131312.3pg" width="300" height="225" /></1i> 

</ul> 

</div> 


[ 05 使 用 相同 的 方法 制作 其 他 的 超 链接 文本 和 图 像 。 


ES o 


第 13 章 使 用 HTML 制作 图 片 特效 WA 


= body { 
Da font-size:14px; 
a line-height:24px; 
| nme To h margin: Opx; 
2 padding: 0px; 
= ; 
E on — fobii 
B= width:1205px; 
ma G = height: 679px; 
border:#ccc 1px solid; 
margin:10px auto; 
overflow:hidden; 
anesan TD a } 


[ 06 P| 执行 “文件 > 新建” 命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 CSS 选项 。 在 新 建 
的 CSS 文档 中 为 body 元 素 和 show 元 素 定义 CSS 样式 。 


| 
m. Ž m = 

mo | 
— =i 
<eewanan mannen < Cuma 

Eee samai 


在 CSS 文档 中 继续 为 其 他 的 元 素 定 义 CSS 样式 。 执 行 “ 文 件 > 保存” 命令， 将 文档 
保存 为 “ 源 文件 \ 第 13 章 \css\131313.css”。 


<meta charset="utf-8"> 


<cicle> 精 到 的 相册 效果 </cicle> <body> 

<link rel="stylesheet" type="text/css" href="css/131313.css"> <div id="show"> 

</head> 1 

<body> <ul> 

<div 4de"show"> <li><div class="alt"><a href="#"><ch3> 第 
<ul> <1i><div><a href="#"><h3>8 lc /h3><p>" 


<li><div><a href="#"><h3> 第 一 帐 </h3><p> 风 雨 心 纸 -已 隔 </p></a>< 
<li><div><a href="#">ch3>i 
<li><div><a href="#"><h3>! 


<li><div><a href="#w><h3> 第 三 幅 </h3><p> 


usa <1ix<div><a href="#n><h3> 第 四 幅 </h3><p>: 
<li><div><a href="#"><h3> 第 四 由 </h3><p>; 与 巴 灯 </p></a>< mji: 1 
<li>cdivy<a href-o#ny<h3> 第 五 屿 c/h3><p> 别 样 的 字体 设计 </p></a>< <li><div><a href-"#"><h3> 第 五 由 </h3><p>! 
<1i><div><a href-o#n><h3y 第 六 幅 c/a3><py 广 投身 村 的 美女 </P></a>< <li><div><a href="#"><h3> 第 六 幅 </h3><p>j 
<li><divy<a href~"#w><h3y 第 七 幅 c/a3><py 灶 栈 的 黑色 跑车 </P>< <liy<divy<a href="š"><h3>Ë-ÜËc/h3><p> 


<1i><div><a href="#"><h3> 第 八 幅 </h3><p> 别 至 的 静物 写真 </p></a>< 
cliy caiv> ca hrcf-"#"> chay 第 九 幅 </hay <p> 械 色 美女 的 妖 纱 </p> </a>. <li><div><a href="#"><h3> 第 八 巾 </h3><p>! 


<1i><div><a href-"#"><h3> 第 十 幅 </h3><p> 冰 天 雪 地 与 良 树 </p></a>< <li><div><a href="#"><h3> 第 九 幅 </h3><p>” 


<1i><div><a href="#"><h3> 第 十 一 幅 </h3><p> 全 色 的 矫健 小 订 </p></= =" m: 3 
at><dtvyca nrer-"a"wychap $+ Wc/na><p> SRE c> = <li><div><a href-"#"><h3> 第 十 帐 </h3><p> 


[os PÆ <title> 标签 下 方 输入 <link> 标签 ， 将 CSS 文档 链 入 html 文档 中 。 为 <li> 标签 中 
的 Div 元 素 添加 class 属性 ， 将 CSS 样式 应 用 到 该 div TRP, 


<body> 
dav 1a="snow"> 
<ur> 
<llz<dly 
<lay<aav 
<aa><aay 
<laycaav 
<la><day 
<ll>cdiv 
<lixcdiv 
<liycdiv 
aiscaiv 


class="alt"><a hret="ę">cn3> $ —Mic/ns>cpo Rt- 2c/p></a></c1v>cLma 
nrer="s=>en3>8 M</n3>cpo RRMEWHM</p></a></217><ing 
nrer="s=>en3>58 Zc n> hEN E</o></a></av>cina 
nrere"g">cn3> $ ikc /n3><p>% EME SM T</0></2></117><1ng 225" /></11> 
hrete"g">cn3> 38 ns><p>PIE5Z (bi H</o></a></div>cina 225。 7></13> 
hreft-"#"><ch3y 惠 六 幅 </h3><D> 大 起 身材 的 美女 c/py</a></diyycimg src=' a nt="225% />¢/11> 
hrefengnycn3> $ bicn EEDE PghEc p> a> di y>cing src=' 3 p="3 225% 1>¢/11> 
hrefangmyen3 Richa MRBS R< /p>c/a>c/diy>cing src=， 3 ht=w225。 />¢/11> 
reE-o#w>ch3y 第 九 幅 <c/h3>cP> 模 外 差 女 的 由 名 c/Py</a></aiyycing sre=' 225" 1></13> 
href="#">cn3> 弟 十 幅 </h3><p> 六 天 于 地 与 银 补 </p></a>c/4iv>cing src= a nt="225" />¢/11> 
Menase FENMEN py as /esvscimg = " />e/1i> 
" />¢/11> 


a5" /></11> 
225" /></11> 
225" 79</12> 


liscdiv 


aiscaiv 
aas<aav 
<r> 
iaav> 
</body> 
</heml> 


[ 09 Pj 使 用 相同 的 方法 为 其 他 的 Div 元 素 添加 class 属性 。 


© ODR ) 


w le [rotura 
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[10 PR “文件 > 新建” MG, EEH MEUN IRER EE JavaScript 选项 。 在 
新 建 的 JavaScript 文档 中 定义 js 脚本 函数 。 


— 
Sr TET 

sapu a 
2036156 s 
maswara n 
s atya apar 1w 
3030117066 2 
it je - CsssƏ 

[TT =] | — NA 

38 “se ERANT: “muvanmamscuq - new 

pia DANAE 


在 JavaScript 文档 中 继续 为 其 他 的 元 素 定义 js 脚本 函数 。 执 行 “ 文 件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文 件 \ 第 13 章 \js\131314.js”。 


<!doctype html> E < L. 
<html> -090m 
<head> onan N 


<meta charser="ucf-s"> 

<zicle> 精 孜 的 相册 效果 </cicle> 

<link rel="stylesheet" type="text/css" href="css/131313.css"> 
<script type="trext/javascript" sro="js/131314.js"></script> 


55eady 
<body> d 
<div id="show"> ey 
<ul> msaa aa 
<li><div class="alt"><a href="#"><h3> xuamasn 


<li><diy clas: 
<li><div clas: 
<li><diy clas: 
<li><div clas: 
<li><diy clas: efeng ">h At/p Ra HA: ee B ë 

<li><div class="alt"><a hm mh3> 第 七 幅 </h3><p> 灶 酷 的 黑色 | CTET] nansa 
<1ix<div class="alt"><a hzef-"#"><h3> 第 八 幅 </h3><p> 别 至 的 若 物 


[ 12 pJ£# <link> 标签 的 下 方 输入 <script> 标签 ， 将 刚刚 保存 的 JavaScript 文档 链 入 html 文 
档 中 。 返 回 到 html 文档 中 ， 将 文档 保存 为 “ 源 文件 \ 第 13 章 \13-13.html”。 


第 13 章 使 用 HTML 制作 图 片 特效 KQ 


? ë 
条 提问 : JavaScript 中 的 null 是 什么 意思 ? 


答 : 在 JavaScript 中 的 null 表示 赋 给 变量 的 值 为 “ 空 ”。 


掌握 广告 交互 效果 的 制作 
掌握 网 页 交互 相册 的 制作 
掌握 图 像 展示 效果 的 制作 


实现 网 页 的 拖 电 效果 


制作 鼠标 点 击 交互 效果 


第 14 章 使 用 HTML 制作 交互 


本 章 将 通过 实例 的 形式 使 用 HIML 5 结合 JavaScript、 


Div 以 及 CSS 制作 一 些 网 站 中 经 常 看 到 的 HTML 交互 效果 。 


f 源 文件 : 第 14 章 \14-1.html A 操作 视频 : 第 14 章 \14-1. swf 


01 jj 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HIML 5 
文档 。 在 <title> 标签 中 输入 文档 的 标题 。 


ss="box"></div> 


[ 02 P| 输入 相应 的 代码 ， 在 <body> 标签 中 创建 一 个 class 
为 box 的 <div> 标签 。 在 <head>…</head> 标签 对 中 创建 
一 个 <style> 标签 。 
"text/css" 
width:920px; margin:0 auto 


</head> 


03 pJ£E <style>…</style> 标签 对 中 输入 相应 的 代码 ， 定 
义 box 的 样式 。 


第 14 章 使 用 HTML 制作 交互 效果 KJA 


TY 


</style> <a> 
</head> 


<body> 
<div class="box"> 


<ul class="tun" id="tes"></ul 388 


</div> <div elass="pex"y 
<ul class="tun" 1a="tes"></21> 
</body> </aiv> 
</vody> 
</html> </atn1> 


在 <div>…</div> 标签 对 中 创建 一 个 class Z tun, id 为 tes 的 <ul> 标签 ， 使 用 相同 
的 方法 ， 定 义 tun 的 样式 。 


</style> </style> 


</head> </head> 
<body> <body> 
<div class="box"> <div class="box"> 


<ul class="tun" id="tes"> 


<li><a hret-"htcp: /mm adobe. com/cn"> fing src] 


a /a></1i> 
</div> <u> 
</body> </div> 
</html> </body> 


</ntml> 


[ 05 pJ <ul>…</ul> 标签 对 中 输入 <li>…</li> 标签 对 和 <a>…</a> 标签 对 ， 定 义 列表 项 
和 超 链 接 。 在 <a>…</a> 标签 对 中 输入 <img/> 标签 定义 图 像 。 
<body> 


<div class="box"> 
<ul class="tun" id="tes"> 


<li><a href="http://www.adobe.com/cn"><img src= 
image/14102.jpg" alt=" F Ë" /></a></1i> 


<li style="margin:0"><a href="http://www.adobe.com/cn"><img srq 
"image/14103.jpg" alt=" 汉 堡 广告 " /></a></1i> 
</ul> 
</div> 
</body> 


[ 06 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 定 义 其 他 列表 项 和 超 链 接 。 


<style type="text/css"> 

.box { width:920px; margin:0 auto} 

.tun { padding:18px 0; height:366px; width:920px; overflow:hidden} 
li { float:right; margin-left:5px; overflow:hidden} 
li img { width:788px; height:366px; border: 0px; | 


P| 使 用 相同 的 方法 ， 在 <style>…</style> 标签 对 中 输入 相应 的 代码 ， 定 义 tun li 和 tun 
li img 的 样式 。 


© MMDA ) 
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[08 Pp) 执 行 “ 文 件 > 新 建 ” 命 令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “ 创 建 ” 
按钮 ， 创 建 一 个 空白 的 js 文档 。 


var oldonload = window.onload; 
return document .getElementById (id) j if (typeof window.onload != 'function') 


} { 
window.onload = func; 

} 
else 
{ 

window.onload = fanction() 
{ 

oldonload(); 

func); 


[ 09 P| 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 设 置 通过 id 获取 Element 对 象 ， 输 入 相应 
的 代码 ， 加 入 事件 到 装载 列表 。 


var sp,st,t,m, sa, 1,W, SW, or 
return{ 
build:function (sm,sw,mt, s, 51,h){ 
msa; t=mt; 
nt.getElementById (m 
sa-m. getElementaByTagName (' 
1=sa.length; w=m.offsethidth - 10; sw=w/1; 
+floor((w-st)/(1-1)); var i=0; 


if(s1!=null) (m.timer=se:Interval (function () (slideMenu.slide(sa[s1-1])),t)) 
1, 
timer:function (s) (s.onmouseover=function () {clearInterval (m. timer) ;m.timer=setInterval (function () {slideMenu. slide (s) },t)}}, 
slide:function (s) í 
var cw=parseInt (s.style.width,'10'); 
if(cw<st){ 
var owt=0; var i=0; 


for(i;i<l;i++){ 
if(sa[i]!=s){ 
var opow; var oi-0; o-sa[i]; ow-perseIne(o.style.width, *10*); 
if(ow>ot) {oi=Math. flo0r( (ow-ot) /sp); oi=(01>0)?01:1; o.style.width=(ow-0i)+'px'} 
owc=awE+(ow-oi) }} 
satyle.width=(v-our)+'px': 
Jelse{clearInterval (m. timer)} 


(io Pj 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 设 置 图 片 轮换 。 执 行 “ 文 件 > 保存 ”命令 ， 弹 
出 “另存 为 ”对 话 框 。 


ç 在 HTML 5 中 添加 外 部 脚本 文件 的 优势 是 可 以 使 多 个 网 页 同时 调用 该 包 
含 相同 代码 的 外 部 脚本 文件 。 


第 14 章 使 用 HTML 制作 交互 效果 KJA 


B= m — <!doctype html> 
SFIO: 4 - 0pm <html> 
S = P sana = <head> 
anen Tusj ansus seier soits CO 
= <title> $£ L& £</citle> 
= <style type="text/css"> 
E] .box { width:920px; margin:0 auto} 
A -tun { padding:18px 0; height:366px; width:920px; 
w -tun li { float:right; margin-left:5px; overflow: 
= .tun li img ( width:788px; height:366px; border:0 
@ </style> 
p - script type="text/javascript" sro="js/14104.33". 
OO </head> 
r mumvormgaqsequmq <oayd 
ERE wacoas 著名 ppm 名 <div class="box"> 
<ul class="tun" id="tes"> 


[11 P| 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ”按钮 。 打 开创 建 的 HTML 5 
文档 ， 输 入 <script> ai bsa Es, ñ URL, 


== Tess) 
- @ r - 
sanm = 
< 
= 
É. 
an 
g 
N 
uan 
™ apao : 
ia 
ee a + [mei 
Plak wieni ta NS n 
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[2 P] 执 行 “ 文 件 > RE" 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 14 章 \14-1. BeF, JR F12 
键 测试 页 面 效果 。 
I _. : P 
< 提问 : JavaScript 有 几 种 放置 位 置 ? 
答 : JavaScript 脚本 代码 可 以 放置 在 HTML 文档 的 任何 位 置 ， 一 般 将 其 
放置 在 <head>…</head> 标签 对 和 <body>…</body> 标签 对 之 间 。 


m 实例 162+ 视频 : 网 页 相册 效果 


ñ Ttt: 源 文件 \ 第 14 章 \14- 2.html A 操作 视频 : 视频 \ 第 14 章 \14-2. swf 


© HTML 5 >》 网 页 制作 》 全程 扬 秘 ) 


=n Ksa SEE = === =s = <!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


</head> 


<body> 
</body> 
</html> 


[91 P| 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


<body> <body> 
div id="tupian"> <div id="tupian"> 
/ div> h1> 网 内 租 册 < /nh1 | 

</body> poa 

</body> 

</html> Pos 


[ 02 P£ <body>…</body> 标签 中 添加 <div> 标签 ， 并 定义 其 这 为 tupian， 在 <div>…</div> 标 
签 对 中 输入 <hl> 标签 定义 最 大 标题 。 


<body> <body> 

<div id="tupian"> <div id="tupian"> 

<h1> 网 页 相册 </h1> <h1> 网 页 相册 </h1> 
| 
/ul> — 

</div> </div> 

</body> </body> 

</html> </html> 


[ 03 Pp] 输 入 <ul>…</ul> 标签 对 ， 并 在 其 中 输入 <li>…</li> 标签 对 和 <a>…</a> 标签 对 ， 
定义 列表 项 和 超 链接 。 


[ 04 P| 在 <a> 标签 中 输入 相应 的 代码 ， 设 置 超 链 接 的 属性 ， 在 <a>…</a> 标签 对 中 输入 
<img> 标签 定义 图 像 。 


ES C C 


第 14 章 使 用 HTML 制作 交互 效果 KJA 


<body> 

<div id="tupian"> 

<h1> 网 页 相册 </h1> 

<ul> 

<li><a href="image/14201.jpg”title=" 两 只 狐狸 "><img src="image/14211.jpg" /> 狐狸 <c/a></1i> 
href="image/14202. ER 


src="image/14212.jpg" />%Rf</a></li> 


href="image/14203. ELE] ng src="image/14213.jpg" /> 熊猫 </a></1i> 
href="image/14204. title=" 调 皮 老 虎 "><img src="image/14214.jpg" /> 老虎 </a></1i> 
href="image/14205. title=" 漂 亮 小 鸟 "><img src="image/14215.jpg”/> 小 鸟 </a></1i> 
href="image/14206. title=" Kilk" ><img src="image/14216.jpg” /> 蝴蝶 </a></1i> 
href="image/14207. title=" MF X88"><cimg src="image/14217.jpg" />MF</a></li> 
href="image/14208. title=" 可 爱 松 限 "><img src="image/14218.jpg" /> 松鼠 </a></1i> 
href="image/14209. title=" 水 中 的 鸡 "><img src="image/14219.jpg" />$8</a></li> 
href="image/14210. title=" 奔 跑 中 的 小 狗 "><img src="image/14220.jpg"” /> 小 狗 </a></1i>| 

</div> 

</body> 


[ 05 P| 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 定 义 其 他 列表 项 和 超 链接 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 网 页 相册 </title> 


</head> 


[ 06 P| 在 <head>…</head> 标签 对 中 输入 <style> 标签 ， 在 <style>…</style> 标签 对 中 输入 
相应 的 代码 定义 整体 和 tupian 的 样式 。 


<!doctype henl> 


cuef-ev> 
> 网页 个 朵 </cicley 
<asyle> 

*i maroin:o: p 
#ruptan( bordes 


j; list-style:none) 
px solid #448C50: border-right:Spx solid $90CC99: background:$RSDFSS: float:left; width:7S0px: ) 


[inat display:block; border 
hh21 background: #9388920; line-heii 


+ packground:#rrr: border: i ë: text-geci :none: paddıng:spx: margan: 10px:) 
d HEEE; oolori#ffs 


使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 定 义 其 他 标签 的 样式 。 


</ul> 
</ul> </div> 
</div> <script language="javascript"> 
script language="javascript" notion setDiv(){ 
</body> </script> 
</html> </body> 
</html> 


[ 08 P| 在 <body>…</body> 标签 对 中 输入 <script> 标签 ， 并 设置 其 属性 ， 在 <script>…</script> 
标签 对 中 输入 function setDiv0{} 函数 。 


© 5 > 网 页 制作 》 全 程 揭秘 ) 


function setDiv()( 
TgerElemencById("rupian"); 
t.createElement ("div"); 

showpic. setAttribute ("id", "showpic"); 

upian.appendChild (showpic,) 

lshowpic.appendChild (document .createElement ("h2") ); 

showpic.appendChild (document .createElement ("img")); 

ar links = tupian.getElementsByTagName ("a"); 

[for(var k=0; k<links.length; k++){ 

linxs [xl .onclick = function(){ 

[return showPic(this); 


function showPic(pic)( 

ar showpic = document.getElementById("showpic"); 
lshowpic.style.display = "block"; 

[Showpic.getElementsByTagName ("h2") [0] .innerHIML = pic.title; 
lshowpic.getElementsByTagName ("img") [0] .setAttribute("src", pic.href); 
[return false; 

|] 


[ 09 P| 在 function setDivO () 函数 中 输入 相应 的 代码 ， 并 在 <script>…</script> 标签 对 中 输 
入 window.onload = setDiv; 代码 。 
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Lo P| 执 行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 14 章 \14-2. ani”, 按 F12 
键 测 试 页 面 效果 。 


提问 : 脚本 中 的 return 是 什么 意思 ? 
答 : 用 户 可 以 通过 return 返回 一 个 数值 即 可 以 将 return < 表达 式 > 后 
面 表达 式 的 值 返回 给 调用 它 的 函数 。 


m 实例 163+ 视频 : 点 击 展示 效果 | 


全 源 文件 : 源 文件 \ 第 EN 3. html ARAUA: 视频 \ 第 14 章 \14-3. swf 


第 14 章 使 用 HTML 制作 交互 效果 MA 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 点 击 展示 效果 </title> 
</head> 

<body> 

</body> 

</html> 


Co Pj 执 行 “ 文 件 > 新 建 ” 命 令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 


档 的 标题 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 点 击 展示 效果 </title> 
</head> 


<body> 
<div style="position:absolute; left:S0%; top:50%" 
</body> 
</html> 


<body> 
<div style="position:absolute; left:-220px; top: 
170px; width:440px; height:340px; background:#000"></ 
biv> 


<div id="screen" style="position:absolute; left: 
200px: top:-150px; width:400px; height:300px; overflow 
idden"></div> 

TE 

</body> 

</html> 


[ 02 P| 在 <body>…</body> 标签 对 中 输入 <div> 标签 ， 并 设置 其 属性 。 使 用 相同 的 方法 ， 
在 <div>…</div> 标签 对 中 创建 其 他 <div> 标签 。 


<body> 
<div style="position:absolute; left:50%;top:50%"> 
<div style="position:absolute; left:-220px; top: 


-170px; width:440px; height:340px; background:#000"></ 
div> 

<div id="screen" style="position:absolute; left: 
-200px; top:-150px; width:400px; height:300px: overflow: 
hidden"></div> 
</div> 


[ 03 P| 在 <body>…</body> 标签 对 中 重新 创建 
</div> 标签 对 中 输入 <img> 标签 定义 图 像 。 


<body> 
<div style="position:absolute; left:S0%;top:50%"> 
<div style="position:absolute; left:-220px; t 
:340px; background: #000"></div> 
<div id="screen" style="position:absolute; 
400px; height:300px; overflow:hidden"></div> 
</div> 


<div id="images" style="position:absolute; 
<img src="image/14301.jpg"/> 
</dr> 


</body> 
</html> 


le 


left:- 


一 个 id 29 images 的 <div> 标签 。 在 该 <div>… 


Ta 


在 <img/> 标签 中 输入 相应 的 代码 ， 设 置 其 事件 属性 。 


© DID J 


<body> 
<div styl: 


—"posivion:absoluse; lefc:-220px; scp:-170px; 1440p; Opx; background: +000"></div> 
screen" style="posıtion:avsolute; 1eTt:-Z00px: Opx: nelgnc:300px; overrlow:n1idgen™></qiv> 


ges" style="position:absolute: 1efr:-10000Fx; 


3 
3.3pg" 
-jpgw 
5.jpg" 
.Jpg" 
4.jpg" 
jpg" 
.jpar 
.jpg" 
.jpgw 


3.3pg' 


'image/14305.3pg" on 
image/14306. jpg" 

</body> 

</nun1y 


[ 05 使 用 相同 的 方法 ， 输 入 其 他 <img/> 标签 ， 定 义 指向 包含 脚本 文件 的 URL， 并 设置 
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[二 六 执行 “文件 > 新建” 命令， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “ 创 建 
按钮 ， 创 建 一 个 空白 的 js 文档 。 


position = function(obj, x, y, w, h) 
t 
ing, mom, W, H; with(obj.style)( 

SP = 40; left = Math.round(x) + "px"; 
dz = false; top = Math.round(y) + "px"; 
Position = function(obj, x, y, w, h) width = Math.round(w) + "px"; 
t height = Math.round(h) + "px"; 


with(obj.style)( 
left = Math.round(x) + "px"; 
top = Math.round(y) + "px"; 
width = Math.round(w) + "px"; 
height = Math.round(h) + "px"; 


function Cobj (parent, N, x, Y, w, h) 


t 


在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 定 义 变量 ， 输 入 function Cobj(parent, N, x, 
y, w, h)() 函数 。 


时 JavaScript 代码 使 用 《script> 和 《/script> 骨 入 到 HTML5 文档 中 ， 
<script> 有 defer、language、src 和 type 等 属性 。 


第 14 章 使 用 HTML 制作 交互 效果 JZ 


> aise at (zomea — 0) 
' ' 

' oe = hts. os 

this, ing onmouseover = runotIont) eee, cusses = "ersssbaie"s 


Fens ov) mathfenis ep) af (parene té $ eones et | am) Bises 
saku pass; 


' 
(nisamg.onettek = fanetiong 


A£ (parens ss tae aš ingore. complete) 


) 
uw saat -1 Ain. sp -ammaesedcen = funotion() 
ar + in children) childeenlil ,inestyle. visibility = "hidden": ' 


this sey wasabala uye“ qasa"; 
ro aao 


' ' 
lse 1f (roomea == 0) 


[ 08 >Æ function Cobj(parent, N, x, y, w, h)() 函数 中 输入 相应 的 代码 ， 定 义 函 数 。 


function starter() 
( 

acr = document gesEl1emencById ("screen"); 

img = document -gecFlemenrById ("imagen") getElementaByTaglame ("img") 7 


O = new Ceb3 (0, 0, 0, 0, 0, 0): 
00 = new capl (9, 1, 127, 38, 381, 139); 
01 = new Cobj(00, 2, 152, 159, 85, 158); 
011 = new Cabj (03, š, 136, 99, 80, 196): 
O111 = new CobJ(011, $, 29, 154, 70, S7); 
01111 = new cebj (0111, €, 161, 137, 184, 76)7 


0112 = new Cob3(011, 11, 155, 154, 70, 57 
01121 = new Cob) (0112, 12, 273, 116, 49, 72); 
02 = new Cobj(00, 3, 281, 159, 90, 154); 
021 = new Cob3(02, 7, 35, 295, 133, 82); 
0211 ~ new Cob3 (021, 
022 = new Cob3(02, 3, 179, 295, 127, 79): 
0221 = new Cob3 (022, 13, 132, 84, 54, 192); 
02211 — new cobj (0221, 14, 6, 234, 69, 59); 
022111 = new cobj (02211, 14, 267, 90, 1 
023 = new Cob3(02, 3, 92, 148, 138 


anac_zocmti z 

O.dtəplay(trae); 

for (Var 3 in O.children) I 
1 


childrenfal 
0.children[i] . 


nit_zcom(1); 
isplay (true): 


0 


[09 P| 使 用 相同 的 方法 ， 输 入 function starter) í) 函数 ， 并 在 function starter0 í) 函数 中 输 
入 相应 的 代码 。 


打开 最 近 的 文件 , = = 


=m -orem 
EIESEch$3T(P)... Ctrl+Shift+O et 
Danu. IENS 


S 
关闭 (CO) Ctrl+W Tm 
全 部 关闭 (6) Ctrl+Shift+W z 

: 
SEHA). Ctrl +Shift+S < 
22880) Q 
保存 所 有 杠 关 文件 (R) 
另存 为 模板 (M).… 


en NR amusrmmaascma -| 
DSE was SE amo 
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[ 10 > 执行 “文件 > 保存 ”命令 , 弹出 “另存 为 ”对 话 框 ， 在 该 对 话 框 中 进行 设置 ， 单 击 “ 保 
F" RH 


<!doctype html> 
<html> 

<head> 

<meta charset="utt-s"> 

<img cyricle> 

ep cp "eet/ averpe" se" "7p | 
EE 


<body> 
<div style="position:absolute; 1eft:50%;top:50$"> 


[ 1 Pj 打 开创 建 的 HTML 5 文档 ， 输入 <script> 标签 并 定义 指向 包含 脚本 文件 的 URL。 使 
用 相同 的 方法 ， 新 建 一 个 CSS 文档 ， 并 在 该 文档 中 输入 相应 的 代码 定义 样式 。 
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[12 P| 执行 “文件 > 保存” 命令， EEH “另存 为 对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 。 ARS HTML 5 文档 ， 输 入 <link/> 标签 并 指定 目标 文档 资源 的 URL, 


[13 Pj 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 FAROLA aa, EE 
键 测试 页 面 效果 。 


提问 : onload 事件 有 什么 用 途 ? 
to onload 事件 可 用 于 检测 访问 者 的 浏览 器 类 型 和 浏览 器 版 本 ， 并 基于 
信息 来 加 载 网 页 的 正确 版 本 。 


=> zi 164+ 视频 : 最 标 拖 奥 效果 


A 操作 视频: 视频 \ 第 14 章 \44 svf 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


| <title> 妃 标 拖 搜 效果 </tit1le> 


</head> 


<body> 
</body> 
</html> 


</body> 
</html> 


[ 02 PP] 在 <body>:::</body> 标签 对 中 输入 相应 的 代码 ,创建 一 个 id 为 black1 的 <div> 标签 ， 
输入 相应 的 代码 ， 在 <div> 标签 中 设置 其 相关 属性 。 


<body> 
<div id="blackı" E AREER onMouseOver="dragObj=black1; drag=1;" 


</body> 
</html> 


[03 PJ 在 <div>…</div> 标签 对 中 输入 <img> 标签 ， 定 义 图 像 。 


© HTvL 5 >》 网 页 制作 》 全程 扬 秘 ) 


<html> 
<head> <body> 
<meta charset="utf-8"> <script type="text/javascript"> 
<title> 妃 标 拖 搜 效果 </title> drag = 0 
</head> - 
[function init() { 

window.document .onmousemove = mouseMove| 

<body> window.document. onmousedown = mouseDown| 


script type="text/javascript"> window.document.onmouseup = mouseUp 


window.document.ondragstart = mouseStop| 


</script> 


在 <body>…</body> 标签 对 中 输入 <script> 标签 定义 一 段 脚本 ， 在 <script> </script> 
标签 对 中 输入 function init0{} 函数 。 


function init() { 
window.document.onmousemove = mouseMove 
window.document.onmousedown = mouseDown 
window.document.onmouseup = mouseUp 
window.document.ondragstart = mouseStop 


unction mouseDown() { 
if (drag) { 
clickleft = window.event.x - parseInt(dragObj.style.left) 
clicktop = window.event.y - parseInt(dragObj.style.top) 
dragObj.style.zIndex += 1 
move = 1 


unction mouseStop() { 
window.event.returnValue = false 


unction mouseMove() { 
if (move) { 
dragObj.style.left = window.event.x - clickleft 
dragObj.style.top = window.event.y - clicktop 


unction mouseUp() ( 
move 


</script> 


[ 05 请 使 用 相同 的 方法 ， 输 入 其 他 函数 ， 以 便 调 用 函数 时 ， 执 行 函数 内 的 代码 。 


<title> 妃 标 抑 搜 效果 </title> 
</head> 


<body [rion 


<script type="text/javascript"> 
drag = 0 
move = 0 
function init() ( 
window .document .onmousemove 


window .document .onmousedown 
[ 96 PÆ <body> 标签 中 输入 onLoad="init0" 代码 。 在 <body>…</body> 标签 对 中 重新 输 
入 相应 的 代码 ， 创 建 另 一 个 <div> 标签 。 


第 14 章 使 用 HTML 制作 交互 效果 KA 


style="height: 66px; left: 212px; position: absolute; top: 297px; width: 79px"> 
<img src="image/14402.png" onClick="javascript:window.open (this.src)" style="cursor:pointer"> 
</div> 

EYETacK357 onMouseðut=drag=0 onMouseðver="dragóbj-blacks; drag=l;"” 

height: 58px; left: 551px; position: absolute; top: 561px; width: 79px"> 
img src="image/14403.png" onClick="javascript:window.open(this.src)" style="cursor:pointer"> 
/div> 
div id="black4" onMouseOur=drag=0 onMouseOver="dragObj=black4; drag=1;" 
style="height: 65px; left: 692px; position: absolute; top: 251px; width: 52px"> 
img src="image/14404.png" onClick="javascript:window.open (this.src)" style="cursor:pointer"> 
/div> 
div id="blackS" onMouseOut=drag=0 onMouseOver="dragObj=blackS; drag=1;" 
style="height: 65px; left: 254px; position: absolute; top: 183px; width: 52px"> 
img src="image/14405.png" onClick="javascript:window.open(this.src)" style="cursor:pointer"> 
/div> 


div id="black6" onMouseOut=drag=0 onMouseOver="dragObj=black6; drag=1;" 
lstyle="height: 65px; left: 436px; position: absolute; top: 562px; width: 52px"> 


img src="image/14406.png" onClick="javascript:window.open(this.src)" style="cursor:pointer"> 
/div> 

div id="black7" onMouseOut=drag=0 onMouseOver="dragObj=black7; drag=1;" 

style="height: 65px; left: 629px; position: absolute; top: 376px; width: 52px"> 

kimg src="image/14407.png" onClick="javascript:window.open (this.src)" style="cursor:pointer"> 
/div> 

div id="black8" onMouseOut=drag=0 onMouseOver="dragObj=black8; drag=1;" 

lstyle="height: 65px; left: 288px; position: absolute; top: 419px; width: 52px"> 

img src="image/14408.png” onClick="javascript:window.open (this.src)" style="cursor:pointer"> 
/div> 

div id="black9" onMouseOut=drag=0 onMouseOver="dragObj=black9; drag=1;' 

style="height: 65px; left: 362px; position: absolute; top: 46px; width: 52px"> 

img src="image/14409.png" onClick="javascript:window.open (this.src)" style="cursor:pointer"> 
/div> 

</body> 

</html> 


使 用 相同 的 方法 ， 在 <body>…</body> 标签 对 中 输入 相应 的 代码 ， 创 建 其 他 <div> 标签 。 
Fe 
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[ 08 >] 执 行 “文件 > 保存” 命令， 将 文档 保存 为 “ 源 文件 \ 第 14 章 \14-4.html”， 按 F12 


键 测试 页 面 效 果 。 


X = = 


Co >] 单 击 并 拖 动 页 面 中 的 元 素 ， 即 可 看 到 元 素 随 着 鼠标 的 移动 而 移动 ， 实 现 鼠 标的 拖 奥 
效果 。 


© MOAIE J 


? é 


< 提问 : css 样式 中 的 {] 代表 什么 ? 
答 : CSS 样式 中 的 () 代表 声明 ， 声 明 是 由 属性 和 属性 值 组 成 的 ， 属 性 
和 属性 值 之 间 以 : 隔 开 ， 属 性 值 的 最 后 以 ; 结尾 。 


而 实例 165+ 视频 : 鼠标 交互 效果 


A 操作 视频 : 视频 \ 第 14 章 \14-5. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
title>mMRIAR</title> 

</head> 


<body> 
n= == = </body> 
= </html> 


[91 PAi X RE G$, MENEAR HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


<cicle> 筷 标 交 互 效果 </cicley> 
</head> 


<li><a title="Select Spades" href="#spades">$</a></13)| 
[al> 

</body> 

</arml> 


[到 站 在 <body>…</body> 标签 对 中 输入 <ul> 标签 和 <i> 标签 定义 无 序列 表 和 列表 项 ， 合 
用 相同 的 方法 ， 输 入 其 他 <li> 标签 定义 列表 项 。 


第 14 章 使 用 HTML 制作 交互 效果 UA 


</ul> 

</ul> <form action=""> 

form action="" 

</form> 

I rm </body> 
</html> 

</body> 

</html> 


[ 03 P| 在 <body>…</body> 标签 对 中 输入 <form> 标签 ， 并 设置 action 属性 。 在 <form>… 
</form> 标签 对 中 输入 id 为 spades 的 <fieldset> 标签 。 
</ul> 


<form action=""> 
<fieldset id="spades">[inpur class="card" g type="radio" rame="spade" 


i 


</body> 
</html> 


[04 P|] 在 <fieldset>…</fieldset> 标签 对 中 输入 <input> 标签 、<label> 标签 和 相应 的 代码 ， 定 
义 输入 字段 和 控件 的 标注 。 


[ 05 P| 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 对 表单 内 的 相关 元 素 分 组 ， 并 定义 输入 字段 和 
控件 的 标注 。 
<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 妃 标 交 互 效果 </title> 


style type="text/css" 
Style> 


</head> 


(06 P| 在 <head>…</head> 标签 对 中 输入 <style> 标签 ， 并 定义 其 属性 。 在 <style>…</style> 
标签 对 中 输入 相应 的 选择 符 ， 定 义 相应 标签 中 内 容 的 样式 。 


EE 


background: #FFFFFEF; 
border:1px solid #CCCCCC; 
background: -moz-linear-gradient (top, #FFFFFF, #DDDDDD) ; 
background: -webkit-gradient (linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); 
border-radius:5px Sp: 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
box-shadow:5px 5px 5px #CCCCCC; 
-webkit-box-shadow:5px 5px #CCCCCC; 
-moz-box-shadow: 5px 5px #CCCCCC; 
filter: progid:DXImageTransform.Microsoft.Shadow (color="#CCCCCC', Direction=135, Strength=5); 
font-size:50px; 
margin:0; 
padding:0 15px; 
position:absolute; 
right :20p; 
top: 15px; 
z-index:99; 
} 
ul lit 
display: inline; 
list-style-type: none; 
, 
ul liat 
color:#000000; 
display:block; 
float:left; 
padding:0 10px; 
text-decoration:none; 


.base{ 
background: #FFFFFF; 
border:lpx solid #CCCCCC; 


color:#000000; 

background: -moz-linear-gradient (top, #FFFFFF, #DDDDDD) ; 
background: -webkit-gradient (linear,0 0, 0 100$, from(#FFFFFF), to(#DDDDDD)); 
border-radius:5px 5px; 

-moz-border-radius: 5px; 

-webkit-border-radius:5px; 

box-shadow: Spx 5px 5px #CCCCCC; 

-webkit-box-shadow:5px 5px #CCCCCC; 

-moz-box-shadow: 5px 5px #CCCCCC; 
filter:progid:DXImageTransform.Microsofc.Shadow(color='#CCCCCC', Direction=135, Strength=5); 
height:360px; 

top:50%; 

margin-top:-180px; 

width:260px; 

left:50%; 

margin-lef' 130px; 

z-inde; 

Cursor:pointer; 

font-size:50px; 

text-decoration:none; 

padding:15px 0 0 25px; 

position:absolute; 


strong( 
font-size 
position 
left:50; 
top:50%; 
margin-top:-160px. 
-webkit-mask-image: -webkit-gradient (linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); 


nl 
font-size: 40px; 
font-style:normal; 
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label spani 
-webkit-transform:rotate (-180deg); 
-moz-transform: rotate (-180deg) : 
-o-transform:rotate (-180deg) ; 
filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=2); 
position:absolute; 
bottom: 15px; 
right:25px; 


[09 P| 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 定 义 strong 类 型 选择 符 、em 类 型 选择 符 和 
label span 类 型 选择 符 的 样式 。 


fieldset{ 
display: none; 


fieldset:targeti 
display: block: 


fieldset:target .card+label( 
-webkit-animation-name: scaler; 
-webkit-animation-duration: 1.75s; 
-webkit-animation-iteration-count: 


fieldset:target .card:checked+label( 
-webkit-animation-name: effectx; 
-webkit-animation-duration: 3s; 


formerar en u -webkit-transform: scale (0); 


[10 P| 输入 id 选择 符 ， 定 义 id 2 spades, hearts, clubs 和 diamonds 的 标签 中 的 <strong> 
和 <em> 标签 的 样式 。 输 入 相应 的 代码 ， 定 义 <fieldset> 标签 以 及 其 中 相关 标签 的 样式 。 


.close ( 
background: #DDDDDD; 
cursor: default; 
left: 0; top: 0; 
position: absolute; 
height: 100%; 
width: 100%; 
z-index: 1; 
text-indent: -999em; 


} 
@-webkit-keyframes scaler { 
from { 

-webkit-transform: scale(0); 
) 


to t 
-webkit-transform: scale (1); 

} 

) 

@-webkit-keyframes effectx ( 

from ( 
—webkit-transform: rotateX (0deg); 

} 

to 4 
—webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ (500px) rotate (180deg) 
-webkit-animation-duration: 30s; 

} 

} 

</style> 


[11 PJ 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 完 成 其 他 样式 的 定义 。 


<script type="text/javascript"> 
function bootup () { 

if (location.hash == "") { location.hash="#spades"; ) var tds = document.getElementsByTagName ("a"); direct (); 
x < tds.length; x++ )(tds[x].onclick = fonction() {setTimeout (direct, 1);):) 


for( var x=0; 
} 

function direct (){ 

了 
window.onload=bootup; 
</script> 

</head> 

<body> 


[12 pJ# <head>…</head> 标签 对 中 输入 <script> 标签 ， 设 置 其 属性 并 定义 函数 。 


© MOLID ) 


< G=sumasun gasnunusansn maawamasazasma" snama B Q 和 EC] 


[03D] 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 14 章 \14- N TEY 
键 测试 页 面 效果 。 


提问 : 查找 HTML 元 素 的 方法 是 什么 ? 
答 : 用 户 可 以 通过 id 找到 HTML 元 素 、 通 过 标签 名 找到 HTML 元 素 和 
通过 类 名 找到 HTML 元 素 3 种 方法 进行 查找 。 


A 操作 视频 : 视频 \ 第 14 章 \14-6. swf 


<!doctype html> 
<html> 

<head> 

<meta charserm atr- 8"> 


<body> 
</body> 
</html> 


[01 上 执行 “文件 > 新建” 命令， 新建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


第 14 章 使 用 HTML 制作 交互 效果 KJA 


<head> <head> 
<meta charset="utf-8"> 


<meta charset="utf-8"> 
<title> 导 航 跳 转 效果 </title> 


<title> 导 航 跳 转 效 果 </title> 


</head> 
</head> 
<body> 
<body> <div id="content"> 
div ide ocntent?. pa TGS=7TIEETESOXES9 class=" littieBoxes"> 
sI iv>. 
Li </div> 
</body> < body: 
</html> </html> 


[ 02 P| 在 <body>…</body> 标签 对 中 输入 相应 的 代码 ， 创 建 一 个 <div> 标签 ， 并 指定 其 id 
属性 。 在 该 <div> 标签 中 嵌 套 另 一 个 <div> 标签 。 


<div 


le="top:0px; left:0px;" 


<a href="">About</a> 


<div class="boxcontent"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 


aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 


</div> 


[ 03 FP] 使 用 相同 的 方法 ， 在 id 中 为 littleBoxes 的 <div> 标签 中 嵌 套 另 一 个 <div> 标签 ， 在 
该 标签 对 中 输入 <a> 标签 定义 超 链接 并 创建 一 个 class 为 boxcontent 的 <div> 标签 。 


class="bg5" style="background-position:-90px 0; top:0px; left:9Spx;"></div> 
class="bg5" style="background-position:-180px 0; to] left:190px; "></div> 


class="bg5" style="background-position:-270px 0; to left:285px; "></div> 
class="bg5" style="background-position:0 -90px; top:95px; left:0px; "></div> 


[ 04 P| 继 续 输入 相应 的 代码 ， 创 建 其 他 <div> 标签 。 


<div class="boxlink bg2" style="top:95px; left:95px;"> 
<a href="">Menu</a> 
<div class="boxcontent"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
aed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 


</div> 
</div> 

<div class="bg5" style="background-position:-180px -90px; rop:95px; left:190px; "></div> 

<div class="bg5" style="background-position:-270px -90px; top:95px; left:285px; "></div> 


<div class="bg5" style="background-positio 
<div class="bg5" style="background-positio; 
<div class="boxlink bg3" style="top:190p: 
<a href="">Chef</a> 
<div class="boxcontent"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
</div> 
<div class="bg5" style="background-position:-270px -180px;top:190px; left:285px; "></div> 
<div class="bg5" style="background-position:0 -270px;top:285px; left :0px; "></div> 
<div class="bg5" style="background-position:-90px -270px;top:285px; left: 95px; "></div> 
<div class="bg5" style="background-position:-180px -270px;top:285px;left:190px; "></div> 
<div class="boxlink bg4" style="top:285px;left:285px; "> 
<a href="">Contact</a> 
<div class="boxcontent"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
</div> 


[[05 >] 使 用 相同 的 方法 ， 在 id 中 为 littleBoxes 的 <div> A rh ig 3E Eb <div> 标签 。 


— e > 


90px; left:0px;"></div> 
top:l90px; left:95px;"></div> 


eft:190px; "> 
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<title> 号 航 跳 转 效 果 </ title> 
<style type="text/css"> 
i i 
margin: 0; 
padding: 0; 
border:0px; 
} 


body( 
background:#fOfff5 url (images/14606.jpg) no-repeat top center; 
font-family:Futura, "Century Gothic", AppleGothic, sans-serif; 
overflow:hidden; 


} 
</style> 


(06 PP 在 <head>…</head> 标签 对 中 输入 <style> 标签 ， 并 在 该 标签 对 中 输入 通 配 选 择 符 和 
body 选择 符 ， 定 义 样式 。 


hl( 
color:#fff; 
margin:40px Opx 20px 40px: 
text-shadow:lpx lpx 1px #555; 
font-weight:normal; 


} 

a.back{ 
position:absolute; 
bottom: 5px; 
right:5px; 


.reference{ 
posicion:absolute; 
bottom: Spx; 
left:5px; 

} 

.reference p a, a.back{ 
text-transform:uppercase; 
text-shadow:lpx lpx 1px fff; 
color: #666; 
text-decoration:none; 
font-size:16px; 
font-weight :bold; 

} 

#content( 
height:380px; 
margin:0 auto; 
margin-top: 60px; 

1 


使 用 相同 的 方法 ， 输 入 其 他 选择 符 ， 定 义 不 同 标签 的 样式 。 
— 
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m aaaa — 四 e) — sam 
ír “文件 > 新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “ 创 建 ” 
按钮 ， 创 建 一 个 空白 的 CSS 文档 。 
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- Dma au 
JW mmie ma go D wama? eolcr:#re 
i sss; 


[ 10 8] 执 行 “文件 > 保存" 命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 。 打 开创 建 的 HTML 5 文档 ， 输 入 <link> 标签 并 定义 指向 目标 文档 或 资源 的 URL 和 
目标 文档 与 当前 文档 之 间 的 关系 。 


= 
tamu 5 


PF] g 
EOE S 


Dmu mano mosar D o 
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[11 P| 执行 “文件 > 新建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “创建 ” 
按钮 ， 创 建 一 个 空白 的 js 文档 。 


[ 12 P| 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 定 义 SCfunction0 () 函数 和 变量 。 


ES C 


区 5 二 HT 5 > 网 页 制作 > 全 程 揭秘 


[13 执行 “文件 > 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 " 
按钮 。 打 开创 建 的 HTML 5 文档 ， 输 入 <script> 标签 并 定义 指向 包含 脚本 文件 的 URL, 
</div> 
</div> 
</div> 
</div> 
<script type="text/javascript" src="js/14610.js"></script> 
script type="text/javascript" src="js/14609.js"></script> 
script type="text/javascript" src="js/14608.js"></script> 


a on 


[15 FP] 执 行 “文件 > 保存” 命令， 将 文档 保存 为 “ 源 文 件 \ 第 14 章 \14-6.html”， 按 F12 
键 测试 页 面 效果 。 


提问 : 在 css 中 表现 颜色 的 方式 是 什么 ? 
答 : CSS 提供 了 4 种 方式 表示 颜色 ， 分 别 是 十 六 进 制 、 短 十 六 进 制 、 三 
元 RGB 数字 和 三 元 RGB 百分比 。 


第 15 章 使 用 HTML 制作 动画 
特效 
本 章 将 通过 实例 的 形式 使 用 HTML 5 结合 JavaScript 
以 及 CSS 制作 一 些 丰 富 而 且 实用 的 动画 效果 。 将 这 些 特效 
根据 需要 应 用 到 自己 的 网 页 中 ， 可 以 使 网 页 动感 十 足 。 


站 源 文件 : 第 15 章 \15-1.html A 操作 视频 : 第 15 章 \15-1. swf [7] 制作 秋天 落叶 效果 


制作 小 球 跳动 效果 


Mfes 


区 ] 制作 太阳 星系 转动 效果 


[ 寺 训 执行 “文件 二 新建” 命令， 新建 一 个 室 碧 的 HTML 5 M 制作 跑车 开动 效果 
文档 ， 在 <title> 标签 内 输入 标题 。 


Kaliti man A O 只 四 后 罗 t 6 


多] 制作 白天 到 黑夜 的 转变 效果 


02 p |# <body> 标签 内 输入 名 称 为 bubbles 的 Div 标签 。 
ZE Div 标签 内 输入 < <img> 标签 


/baas 


03 P| 使 用 相同 方法 输入 其 他 <img> 标签 ， 在 </title> 标 
签 后 输入 <script> 标签 


© D ) 


width:100%; 
height:100%; 


</style> 
<script type="text/javascript"> 
var object = new Array(); 


(04 PÆ </style> 标签 后 新 建 <script> 标签 ， 在 标签 内 输入 JavaScript RE, 使 用 相 同 的 方 
法 输入 其 他 的 JavaScript 代码 。 


N srb ° 


[ 05 执行 “文件 > 保存 ”命令 ， WIERE) “xi 第 15 G 1.html”， 按 Fl2 
键 测 试 页 面 效果 。 当 鼠标 经 过 图 像 并 移动 时 ， 图 像 会 随 着 鼠标 移动 。 


24 
* 


提问 : 什么 是 函数 ? 
答 : 在 编写 程序 时 ， 为 了 方便 日 后 的 维护 及 程序 更 好 地 进行 结构 化 ， 通 
常 都 会 把 一 些 重复 使 用 的 代码 独立 出 来 ， 这 种 独立 出 来 的 代码 块 就 是 函数 。 


m 实例 168+ 视频 : 旋转 的 立体 花 采 


rir.” 


f 源 文件 : 源 文件 \ 第 15 章 \1 


A 操作 视频 : 视频 \ 第 15 章 \15-2. swf 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> EMARE R</title>| 


</head> 


<body> 

</body> 

</html> 

[91 PJ 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


<Eicle> 旋 转 的 立体 花 洒 </zicle> 
style type="text/css"> 
html { 
overflow:hidden 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 旋 转 的 立体 花 扩 </title> 
</head> 


} 

body, .screent 
background: #000; 
overflow:hidden; 
width:100%; 
height:100%; 
position:absolute; 
margin:0; 
Padding:0; 


<div i screen" ></div> 


</body> 
</html> 


’ 


/scyle> 


[ 02 p| # <body> 标签 中 新 建 一 个 id 名 称 为 screen 的 Div 标签 ， 在 </title> 标签 后 添加 
es 标签 对 ， 为 html 和 body 定义 CSS 样式 ， 并 定义 一 个 名 称 为 screen 的 CSS 类 样式 。 


#screen( overflow:hidden; 
left:0; 
top:0; L 
zoom:1; Fs> 
2ad> 


screen span{ 
position:absolute; iy> 


Fons=eiser0 7 id="screen"| class="screen"b 


line-height:0; 


overflow:hidden; o 
2dy> 
</style> -ml> 


[ 03 P| 定义 名 称 为 #screen，#screen span 的 CSS 样式 ， 并 为 id 名 称 为 screen 的 Div 标签 应 
用 screen 类 样式 。 


#screen( 


#screen spani 
position:absolute; 
font-size:0; 
line-height:0; 
overflow:hidden; 
? 
</style> 
[script type="text/javascript"> 
lvar obj = [], xm = 0, ym = 0, axe = 0, 


aye = h parts = 500, scr, txe, tye, nw, nh; 


UR 


mm Em enses 


[04 PJE </style> 标签 后 新 建 <script> 标签 对 ， 并 在 <script> 标签 内 输入 JavaScript 代码 。 
使 用 相同 的 方法 输入 其 他 JavaScript 代码 。 


© HTML 5 > 两 页 制作 > 全 程 扬 秘 ) 


[05 Pp] 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-2.html”， 按 F12 


键 测试 页 面 效 果 。 当 鼠标 经 过 图 像 并 移动 ， 动 画 会 随 着 转动 。 


提问 : function 的 作用 是 什么 ? 
答 : fE JavaScript 中 定义 一 个 函数 ， 必 须 以 function 关键 字 开 头 ， 函 数 
名 跟 在 关键 字 后 ， 接 着 是 一 个 用 括号 括 起 来 的 参数 列表 。 


件 : 源 文件 \ 第 15 章 \15-3.html S) 操作 视频 : 视频 \ 第 15 章 \15-3. swf 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title># </title> 


</head> 


<body> 

</body> 

</html> 

[ 01 多 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 ， 执 行 “ 文 件 > 保存” 命令， 
将 文档 保存 为 “ 源 文 件 \ 第 15 章 \15-3.html”。 在 <title> 标签 中 输入 文档 的 标题 。 
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<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 竹 大 落叶 </title> 
</head> 


<body> 
</body> 
</html> 


<title> 牧 大 落叶 </title> 
</head> 


<body> 
<div style="display: none"></div> 
<div id="box"> 

<div id="leafContainer"></div> 
</div> 


<div id="adsense" 
Ee 1024px; margin:10px auto"> 


</body> 
</html> 


Eai 标签 内 新 建 一 个 Div 标签 ， 样 式 设 为 不 显示 ,使 用 相同 方法 新 建 其 他 标签 。 


ETT WT TS EEEIEE] 


CE OOA 


aa 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> ýrte/title> 
1: el="stylesheet™" href: 
ype="text/css"> 
</head> 
<body> 
<div style="display; none"></div> 
<div id="box"> 
<div id="leafContainer"></div> 
</div> 
<div id="adsense" style="width:1024px; margin:10px auto"> 
</div> 
</body> 
</heml> 


3/15301.cssw 


CE 


i 


执行 “文件 > 新 建 ” 命令 新 建 一 个 空 自 的 CSS 文档 输入 Css 代码 。 执行 “文件 
> 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 15 章 \css\15301.css”。 


Dw m 0- A m 
amn meo wav ma sm wao awo xau wow se" 


D] 


<head> 

<meta charset="utf-8"> 

<title> $t</title> 

<link rel="stylesheet" href="css/15301.css" type="t 


script type="text/javascript” src="js/15303.js">| 
/ script> 


zad 
<body> 
<div style="display: none"></div> 
<div id="box"> 
<div id="leafContainer"></div> 
</div> 
<div id="adsense" style="width:1024px; margin:10px 
</div> 
</body> 
</html> 


— js 文档 中 输入 JavaScript ERE, 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 


\ 第 15 章 \is\15303.js”。 


© ORNE ) 


[到 站 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 15 章 \15-3 html”, jëF12 
键 测试 页 面 效果 ， 可 以 看 到 树叶 在 不 停 肘 落 的 效果 。 


提问 : 定义 函数 必须 要 使 用 function 吗 ? 
答 : function 语句 并 非 是 定义 新 函数 的 唯一 方法 ， 还 可 以 使 用 Function() 
构造 函数 和 new 运算 符 动态 地 定义 函数 。 


m 实例 170+ 视频 : 小 球 跳动 


| k W W k L < w = 一 

f 源 文件 : 源 文件 \ 第 15 章 \15-4.html A 操作 视频 : 视频 \ 第 15 章 \15-4 swf 

s <!doctype html> 
<html> 
<head> 
<meta harset=" -8" 
<Eicle> 逼 真 的 小 球 跳 动 动画 </zitle> 
</head> 

; <body> 

kica—Ñ a </body> 
</html> 


[31 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 ， 执 行 “文件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-4.html”。 在 <title> 标签 中 输入 文档 的 标题 。 


第 15 章 使 用 HTML 制作 动画 特效 AA 


<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title> 逼 真 的 小 球 跳动 动画 </title> 
</head> 

<body> 


</body> 
</html> 


<title> 逼 真 的 小 球 跳动 动画 </titley 
</head> 

<body> 

<div id="box"> 


<div id="ball"></div. 
<div id="baw"></div> 


</div> 
</body> 
</html> 


[ 02 P] 在 <body> 标 签 内 新 建 一 个 id 名称 为 box 的 Div 标签 , 使 用 相同 方法 新 建 其 他 Div 标签 。 


rem 


=- W 


maau mn 
C) a 
ER aes 
Th amawa 
E een 
Esen 


EEJ 


iaa me 


@charset "utf-8"; 


body( 


background:url(../images/15402.png) repeat top left; 


#box i 


width: 140px; 
height: 300px; 
position: fixed; 
left: 50%; 

top: 35%; 
margin-left: -70px; 


[03 PT F> 新 建 ”命令 ， 新 建 一 个 空白 的 CSS 文档 ， 为 body 新 建 CSS 样式 ， 为 id 


名 称 为 box 的 Div 标签 新 建 CSS 样式 。 
#baw { 
position: absolute; 
lett: 
bottom: 0; 
Sinas is 
margin-lefe: -30px; 
a Ei 
height: TSpx; 
backgzou 


zgba(20, 20, 20, . 


box-shadow: Opx 0 20px 35px rgba (20,20,20, .1): 
border-radius: 30px / 40px; 


-webkit-transform: scaleY(.3); 


-o-transform: scaleY(.3); 
transformi scaleY(.3); 
—webkit-animation: shrink 1s infinite; 
-moz-animation: shrink ls infinite: 
-o-animation: shrink 1s infinite; 
-ms-animation: shrink is infinite; 


animation: shrink 1s infinite; 


CEA i E w ==!) 
emo + - @# e m- 
各 [ =" 
D oa Ti mws meere 
mis 201S 1705 meters 
= 
= 
| A 
Br, 
RE snap Murar - Ü mao 
S 
weas. + (me 
PBE wc ES om) 9 Casas J 


为 id 名 称 为 baw 的 Div 标签 新 建 CSS 样式 。 执 行 “文件 > 保存 ”命令 ， 将 文档 保存 


为 15401.css。 
<meta charset="utf-8"> 


<title> 逼 真 的 小 球 跳 动 动画 </zitley> 
<link rel="stylesheet” type="text/css” href="css/15401.css"> 


</head> 


[05 PÆ <title> 标签 后 输入 <link> 标签 对 ， 将 CSS 文档 链 入 html rh, 


<title> 逼 真 的 小 了 球 跳动 动画 </title> 


<link rel="stylesheet” type="text/css" href="css/15401.css"> 
<link rel="stylesheet" type="text/css" href="css/15403.css"> 


[ 06 使 用 相同 方法 新 建 其 他 的 link 标签 。 


ES 


© OD ) 


© v 


(97 Phu ° “文件 > 保存" 命令 ， 将 文档 保存 为 。 按 F12 
键 测试 页 面 效 果 ， 可 以 看 到 小 球 不 停 地 跳动 。 


提问 : 还 有 其 他 方法 定义 函数 吗 ? 

答 : 还 可 以 使 用 函数 直接 量 来 定义 函数 ， 函 数 直接 量 是 一 个 表达 式 ， 可 
以 定义 匿名 函数 ， 它 与 function 语句 非常 相似 ， 被 用 做 表达 式 ， 而 不 是 语句 ， 
而 且 也 不 需要 指定 函数 名 。 


f 源 文件 : 源 文件 \ 第 15 章 \15-5.html A 操作 视频 : 视频 \ 第 15 章 \15-5. swf 


<!doctype html> 


</head> 


<html> 
> <head> 
š <meta charset="utf-8"> 
<title> 当 年 的 大 风车 </title> 
<body> 


</body> 
</html> 


[01 及 执行 “文件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 ,执行 “文件 > 保存 ” 命 
将 文档 保存 为 “ 源 文 件 \ 第 15 章 \15-5 html”， 在 <title> 标签 中 输入 文档 的 标题 。 


一 mm 


第 15 章 使 用 HTML 制作 动画 特效 A 


<!doctype html> it | 实时 视图 D ÇQ. O 标题 当年 的 大 风 
<html> Easy | 
<head> apupa 
<meta charset="utf-8"> I 
<title> 当 年 的 大 风车 </title> charset="utf-8"> 

:> 当年 的 大 风车 </title> 


</head> P 


liv id="box"> 
<canvas id="wind" style="background-color:#000" 


</body> 
</html> É 
[ 02 p]# <body> 标签 内 新 建 一 个 id 名 称 为 box 的 Div 标签 ， 在 该 Div 标签 内 新 建 标签 为 
<canvas> 的 标签 ， 并 定义 相关 属性 。 


<title> 当 年 的 大 风车 </title> 
<style type="text/css"> 
lbody{ 

background:#000 


} 
#box( 


width:800px; 
height:600px; 
margin:0 auto; 


) 
</style> mas | mape mnsan sao 


(03 PÆ </title> 标签 后 新 建 <style> 标签 ， 并 在 标签 内 为 body 建立 CSS 样式 ， 为 名 称 为 
box 的 Div 建立 CSS 样式 ; 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 JavaScript 文档 。 


Dw m o a a e 


canvas, context; 
X; Y: 
canvasWidth, canvasHeight; 
speed = 1; 
R = 40; 

function init(){ 
initCanvas(); 
initParams(); 
draw(); 
setIinterval (draw, 20); 


(OA PJ JavaScript 文档 中 输入 JavaScript 变量 和 函数 ， 使 用 相同 方法 输入 其 他 函数 ， 实 现 


<style type="text/css"> 
bodyi 
background: #000 


} 

#box( 
width:800px; 
height: 600px; 
margin:0 auto; 


} 


， </style> 
aman mn EE= = [<script type="text/javascript" src="js/15501.js" 
rr [c/script> 


</head> 
et 和 和 En = sas 
Eak misa ue smo sess <body> 
<div id="box"> 


[05 内 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 ys\15501js”。 在 <style> 
标签 后 新 建 <script 标签 对 ， 将 文档 嵌入 html 文档 中 。 


© ut 5 > 网 页 制作 > 全 程 揭秘 


[05D 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-5.html”。 按 F12 
键 测试 页 面 效果 ， 可 以 看 到 大 风车 在 不 停 地 转动 。 


提问 : 定义 函数 的 语句 是 通用 的 吗 ? 

答 : function 语句 在 所 有 的 JavaScript 版 本 中 都 是 有 效 的 ， 而 Function) 
构造 函数 只 在 JavaScript 11 和 其 后 的 版 本 中 有 有效， 函数 直接 量 只 
JavaScript 1.2 和 其 后 的 版 本 有 效 。 


m KA 172+ 视频 : 变幻 的 3D 动画 效果 | 


A 操作 视频 : 视频 \ 第 15 章 \15-6 swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 变 纠 的 3D 动 国 效 果 </title> 


</head> 


<body> 


[eer | 


[91 PHT X> 新 建 ” 命令， 


<div> 
/div> 


</body> 


</html> 


新 建 一 个 空白 的 HTML 5 文档 ,执行 “文件 > 保存” 命令， 


将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-6.html”。 在 <title> 标签 中 输入 文档 的 标题 ， 并 新 建 


一 个 id 名称 为 box 的 标签 。 


第 15 章 使 用 HTML 制作 动画 特效 WA 


<title> 变 幻 的 3D 动 国 效果 </title> 
<style type="text/css"> 
body( 
background-color: white; 
color: black; 


</head> 
background-color: black; 
color: white; 
text-align: center; 


</style> 
02 ] 在 id 名称 为 box 的 Div 标 签 内 新 建 一 个 <canvas> 标签 ， 在 </title> 标签 后 新 建 
<style> 标签 对 ， 在 <script> 标签 内 输入 CSS 代码 。 


ve kam) weer 


(03 PHT X> SRE” Me, SEE — 3 Ah JavaScript 文档 ， 在 JavaScript 文档 中 输 
入 JavaScript 代码 。 


am 


id="canvas" width= 


00" height=! 


[04 FP] 执 行 "k> 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 \js\15601js”， 在 </body> 
标签 前 新 建 <script> 标签 对 ， 将 js 文档 链接 入 html mssi 


05 jj] 执行 “文件 > 保存 ” 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-6.html”。 按 F12 
键 测试 页 面 效 果 ， 可 以 看 到 不 停 变 幻 的 3D 动画 效果 。 


© OD ) 


提问 : 为 什么 JavaScr ipt 代码 放置 的 位 置 经 常会 不 相同 ? 

答 : 将 js 代码 放置 在 <head> 标签 之 间 ， 可 以 使 之 在 页 面 文档 主体 和 其 
余部 分 代码 之 间 加 载 ， 尤 其 是 一 些 函数 的 代码 ， 建 议 放 置 在 <head> 标签 中 。 
而 一 些 实现 某 部 分 动态 效果 的 js 代码 则 可 以 放置 在 <body> 标签 之 间 。 


局 了》 实例 173+ 视频 : 太阳 系 动画 


E 


f 源 文件 : 源 文件 \ 第 15 章 \15-7. html SÀ) 操作 视频 : 视频 \ 第 15 章 \15-7. swf 


<meta charset="utf-8"> 


<title> 制 作 太阳 星系 动画 </title> 


[Lo1 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 ， 执 行 “ 文 件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-7.html”， 在 <title> 标签 中 输入 文档 的 标题 。 


<meta charset="utf-8"> <body> 
<title> 制 作 太阳 星系 动画 </zitle> PETION 
ee <section> 
<ul> 
<1li><span>Sun</span></1li 
<section> </ul> 
</section> </section> 
/div> </div> 
</body> </body> 
</html> </html> 


[ 02 P)Æ <body> 标签 中 输入 <div> 标签 对 ， 在 <div> 标签 中 输入 <section> 标签 对 ， 在 
<section> 标签 中 输入 <ul> 标签 对 ， 在 <ul> 标签 中 输入 <l> 标签 对 ， 在 <i> 标签 中 输入 
<span> 标签 对 ， 在 其 中 输入 “sun"。 


第 15 章 使 用 HTML 制作 动画 特效 WA 


<ul > 


><span>Sun</span></1li> 
><span>Mercury</span></1i> 
><span>Venus</span></1i> 

><span>Earth<span >Moon</span></span></1i> 
><span>Mars</span></1i> 


><span>Asteroids Meteorids</span></1i> 
><span>Jupiter</span></1i> 
><span>Saturn<span >Ring</span></span></1i> 
><span>Uranus</span></1i> 
><span>Neptune</span></1i> 


</ul> 


><span>Pluto</span></1i> 


03 p 使 用 相同 方法 输入 <ul>, <li> 和 s gai 并 在 <span> 标签 内 输入 所 需 的 字符 。 


wass — E 
pæ margin: 0; 
Hea padding: 0; 
es = 
Th mrn ody ( 
maa font: 14px/1.5 "Helvetica Neue", 
Helvetica, Arial, sans-serif; 
E a Banza cm 六 background-color: #000; 
"L. color: #626668; 
] wrap 1 
width: 960px: 
margin: 0 auto; 
padding: 60px 0; 
m aa esea = 


04 | 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 CSS 文档 ， 在 CSS 文档 中 输入 CSS 代码 。 


masman mmama + ia) 
Ps moele ae ome) T 


05 上 | 使 用 相同 方法 输入 其 他 CSS 代码 ， 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 
件 \ 第 15 章 \css\15701.css”。 


link rel="stylesheet" type="text/css" <div |class="wrap clearfix"þ 
href="css/15701.css" /> 


<section > 


</head> 

<ul > 
<body> <li ><span>Sun</span>< 
<div class="wrap clearfix"> <li ><span>Mercury</ sp 


<section class="clearfix"> 


<ul class="solarsystem"> 


<li >xspan>Venus</ spar 


<li>Sun</span></li> <li ><span>Earth<span 
<li><span>Mercury</span></1i> <li ><span>Mars</span: 


<li><span>Venus</span></1i> 


<li ><span>Asteroids } 


<li><span>Earth<span class="moon' 


zli NXZemanxTunmirexz/ ər 


06 P| 在 </head> 标签 前 输入 <link> 标签 ， 将 文件 15701.css 链接 入 该 html 文档 中 ， 为 
<div> 标签 添加 class 样式 。 


© OD ) 


<div class="wrap clearfix"> 
<section class="clearfix"> 
<ul class="solarsystem"> 
<li class="sun"><span>Sun</span></1i> 
<li class="mercury"><span>Mercury</span></1li> 
<li class="venus"><span>Venus</span></1i> 
<li class="earth"><span>Earth<span class="moon">Moon</span></span></li> 
<li class="mars"><span>Mars</span></1i> 
<li class="asteroids meteorids"><span>Asteroids Meteorids</span></li> 
<li class="jupiter"><span>Jupiter</span></1li> 
<li class="saturn"><span>Saturn<span class="ring">Ring</span></span></li> 
<li clas. uranus"><span>Uranus</span></1i> 
<1i class="neptune"><span>Neptune</span></1i> 
<1i class="pluto"><span>Pluto</span></1i> 
</ul> 
</section> 
</div> 


07 使 用 相同 的 方法 为 其 他 标签 添加 class 样式 。 


— = >r] m G | 
文件 \ 第 15 章 \15-7.html”。 按 Fl12 


(o8 P| 执 行 “ 文 件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 
键 测试 页 面 效 果 ， 可 以 看 到 太阳 系 的 运动 。 


提问 : 将 js 代码 写 在 一 个 外 部 JavaScr ipt 文档 中 有 什么 好 处 ? 
答 : 一 个 外 部 的 JavaScript 文档 可 以 应 用 到 无 数 个 HTML 文档 中 。 如 果 
以 后 再 次 制作 一 个 需要 该 功能 的 网 页 时 ， 只 需要 将 其 链接 到 新 网 页 中 即 可 。 


m 实例 174+ 视频 : 跑车 开动 效果 


第 15 章 使 用 HTML 制作 动画 特效 WA 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


</head> 
<body> 


</body> 
</html> 


[ 01 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 ， 执 行 “ 文 件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文 件 \ 第 15 章 \15-8.html”， 在 <title> 标签 中 输入 文档 的 标题 。 


<!doctype html> J -zicle> 跑 熙 </cicle> 
<html> 6 Styley 

<head> { 

<meta charset="utf-8"> 
<title> 跑 车 </title> 


margin:0; 
padding:0; 


outline:none; 


<div></div> 


</div> background:#000; 


16 style> 


[ 02 P| 在 <body> 标签 中 输入 <div> 标签 对 ， 在 <div> 标签 中 输入 <div> 标签 对 ， 在 <title> 
标签 后 输入 <style> 标签 对 ， 在 <style> 标签 中 输入 CSS 代码 。 


Po lorgrousd: s0007 </head> 

1 

aA o a 
pomeion:apaorote: 
atone Loots <body> 

ia EEA <div [c1lass="container']> 
ascy250px/ 
Semata <div></div> 
heignt:395px; i 
er </div> 

Ep </body> 

ER </html> 

[ 03 Pj 使 用 相同 的 方法 输入 其 他 CSS 代码 ， 为 第 1 个 Div 标签 添加 container 标签 。 
.redt e= š ES) 
background:url (images/159 
} 
</style> 
</head> 
Iraan za 

<body> 
<div class="container"> saan 
</div> 
</body> 
</html> mo aasan mesra TE mas 


(04 P] 为 第 2 个 标签 添加 插入 car small 标签 ， 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 
JavaScript 文档 。 


© HTML 5 > 网 页 制作 > 全 程 揭秘 J 


BF sess ER OO) m 


[ 05 p fE rE rh Ó JavaScript 代码 ， 执 行 “ 文 件 > 保存 ”命令 ， 保 存 文档 为 15803. jso 


jav t /15803.3s"> 


background:url(images/15802.png); 


06 在 </body> 前 输入 script 标签 对 ， 将 15803js 链 入 html 文档 中 ， 使 用 相同 方法 在 </script> 
标签 后 输入 script 标签 对 ， 并 在 标签 对 中 输入 JavaScript 代码 。 


[到 站 执 行 “ 文 件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 件 \ 第 15 章 \15-8.html”。 按 F12 
键 测试 页 面 效果 ， 可 以 看 到 奔驰 的 轿车 。 


@ 


链 入 JavaScript 文档 的 地 址 ， 必 须 是 前 面 用 户 保存 的 地 址 ， 否 则 将 无 
法 正确 链 入 JavaScript 文档 中 。 


9 Á 
rf < 提问 : 在 <style> 标签 内 或 SS 文件 中 一 个 属性 可 以 定义 两 次 属性 值 吗 ? 
答 : 一 个 属性 可 以 定义 两 次 或 多 次 属性 值 ， 但 只 有 最 后 一 次 定义 生效 。 


所 以 需要 修改 属性 值 时 直接 在 后 面 加 写 即 可 。 


s: 实例 175+ 视频 : 天 作 电 去 到 器 交 的 效果 


和 操作 视频 : 视频 \ 第 15 章 \15-9. swf 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 


</head> 
<body> 


</body> 
</html> 


[91 Pp] 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 ,执行 “文件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-9.html” <title> 标签 中 输入 文档 的 标题 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 由 白天 到 黑夜 </title> 
</head> 


<body> 
</body> 
</html> 


D sa 
Eps 


am 
KQ re 
E awa 
Paa Eassa œ= ze 
D 
= ER 
amesem D -as 


bodys 
id="sky"></div> 
id="sun yellow"></div> 
id="sun red"></div> 
id="clouds"></div> 
id="ground"></div> 


id="night"></div> 
id="stars"></div> 
id="sstar"></div> 
id="moon"></div> 


#sky{ 
background:#fff 
url(../images/15904.png) repeat-x top left; 
z-index:1: 


#sun_yellov( 
position:absolute; 
lefc:4sw%; 
top:50: 
width:150px; 
height:152px; 
background: transparent 
url(../images/15905.png) no-repeat center center; 
z-index:2; 


F 文件 > 新 建 ”命令 ， PEL CSS 文档 ， 输 入 CSS 代码 。 


区 5 二 HTvL 5 > 网 页 制作 > 全 程 揭秘 ] 
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04 P| 使 用 相同 方法 输入 其 他 CSS 代码 ， 执 行 “ 文 件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文 
件 \ 第 15 章 \css\15901.css”。 


<title> 由 白天 到 黑夜 </title> 


<link rel="stylesheet" type="text/css" href="css/15901.css" media="screen"/> 
</head> 


05 ] 在 <title> 标签 后 输入 <link> 标签 ， 将 CSS 文档 链 入 html 文档 中 。 


JavaScript Document 


— — 

m: ma * 
D s 3 
ms 3 "s. " 
Tamman F Sea 

Pr * 
加 mn F 
加 mo 3 = * 
De $ 

: aman 


(function (jQuery) { 


-m nma -r W 


[ 96 Pp] 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 js 文档 ， 输 入 js 函数 。 


osem 
osam 
zsm a1 
20392 1107 
zorsa 1631 
20136/12 1627 
22 nai 
senna sa 

1902 2009/12/14 1505 geript Seript F 

aso OOOI JeiptSerptX 


[ 07 多 使 用 相同 方法 输入 其 他 JavaScript 代码 , 执行 “文件 > 保存 ”命令 , 将 文档 保存 为 “ 源 
文件 \ 第 15 章 \js\15902.js”。 
<div id="moon"></div> 
<script type="text/javascript" src="js/15902.js"></script> 
</body> 
</html> 


[ 08 PÆ </body> 标签 前 输入 <script> 标签 对 ， 将 js 文档 链 入 html 文档 中 。 


第 15 章 使 用 HTML 制作 动画 特效 WA 


<div id="moon"></div> 

<script type="text/javascript" src="js/15902.js"></script> 

<script type="text/javascript" src="js/15903.js"></script> 

TP 
</hrml> 


[ 09 > 使 用 相同 的 方法 链 入 “ 源 文件 \ 第 15 章 \js\15903.js”。 


<script type="text/javascript" src="js/151003.js"></script> 
<seript type="text/javascript"> 
$ (ranction() { 
$('#sun_yellow') .animate({'top':'96%$','opacity':0.4}, 12000,funetion()( 
$('#scars').animate(('opacity':1), 5000,funetion()( 
$('#moon').animate(('top':'30%','opacity':1), 5000, function ()( 
$('#sstar').animate(('opacity':1), 300); 
$('#sstar').animate(( 
'backgroundPosition':'Opx Opx','top':'15%', 'opacity':0 
}, 500,function()( 
$('#title').animate({'opacity':1}, 1000); 
$('#back').animate(('opacity':1), 3000); 
H: 
p: 
H: 
H: 
$('#sun_red').animate(('top':'96%','opacity':0.8), 12000); 
$('#sky') .animate ({'backgroundColor' :'#4F0030'}, 18000); 
$ ('#clouds') .animate ({'backgroundPosition':'1000px Opx','opacity':0), 30000); 
$('#night').animate(('opacity':0.8), 20000); 
]) 7 


10 pJfE <script> 标签 后 再 输入 Sa 标签 对 ， 并 在 标签 对 后 输入 JavaScript 代码 。 
— s = E TE 


[1 elh “文件 > 保存 ” 命令 ， 将 文档 保存 为 “ 源 文件 \ 第 15 章 \15-9.html”。 按 Fl12 
键 测试 页 面 效 果 ， 可 以 看 到 从 白天 到 黑夜 的 效果 。 
2 Á 
< 提问 : 实例 中 的 js 代码 是 由 什么 组 成 的 ? 
答 : js 代码 基本 上 是 由 字符 串 组 成 的 ， 字 符 串 是 由 Unicode 字符 、 数 字 
和 标点 符号 等 元 素 组 成 的 字符 序列 ， 是 JavaScript 用 于 表示 文本 的 数据 类 型 。 


M 掌握 制作 滑动 效果 


M 掌握 制作 实时 时 间 效 果 


[v] 掌握 制作 书本 翻 页 效果 


M 掌握 制作 游戏 效果 


掌握 按钮 控制 音频 的 方法 


第 16 章 使 用 HTML 制作 其 他 
特效 


本 章 将 通过 实例 的 形式 使 用 HTML 5 结合 JavaScript, 
Div 以 及 CSS 制作 一 些 网 站 中 经 常会 看 到 的 其 他 特效 。 


f 源 文件 : 第 16 章 \16-1.html A 操作 视频 : 第 16 章 \16-1. swf 


> 仿 手 机 滑 屏 </ title> 


</head> 


k 四 一 </html> 

01 P| 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 
文档 。 在 <title> 标签 中 输入 文档 的 标题 。 

</head> 


<body> 
Kdiv id="iphone">> 


[ 02 P| 输入 相应 的 代码 ， 在 <body> 标签 中 创建 一 个 id 为 
iphone 的 <div> 标签 。 在 该 标签 对 中 嵌 套 一 个 id 为 lock 
的 <div> 标签 。 
<div id="lock"> 
<span>=<x/ span> 
</div> 
[ 03 P| 在 该 <div></div> 标签 对 中 输入 相应 的 代码 ， 对 文 
档 中 的 行内 元 素 进行 组 合 。 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


<'!doccype html> 


<!doctype html> eiis 
<html> neng 
<meta charset="utf-8"> 
<head> <title> 仿 手机 滑 屏 </title> 
<style type="text/css"> 
<meta charset="utf-8"> zw 
P 3 = position:relative; 
<title> 仿 手机 滑 屏 </title> ep napi qa 
style type="text/css"> kausana qipyqpiqpd 
margin:l0px auto; 
[< = e background:url(images/16101.jpg) no-repeat 


</head> ER 


</head> 


[ 04 P| 在 <head></head> 标签 对 中 输入 <style> 标签 ， 并 设置 其 属性 。 在 该 标签 对 中 输入 id 
选择 符 ， 设 置 样式 。 


} 


position:absolute; 
left:50%; 

bottom: 33px; 
width:358px; 
height:62px; 
margin-left:-179px; 


#lock span{ 

position:absolute; 

width:93px; 

height:62px; 

cursor:pointer; 
background:url(images/16102.jpg) no-repeat; 


</style> 
[ 05 Pj] 使 用 相同 的 方法 ， 输 入 相应 的 id 选择 符 ， 设 置 <lock> 标签 中 内 容 的 样式 。 


<script type="text/javascript"> 
window.onload = function () 


t 

var iPhone = document.getElementById("iphone"); 
var oLock = document.getElementById("lock"); 

var oBtn = oLock.getElementsByTagName ("span") [09]; 
var disX = 0; 

var maxL = oLock.clientWidth - oBtn.offsetWidth; 
var oBg = document .createElement ("img") ;| 

): 

</script> 


[ 06 P| 在 <head></head> 标签 对 中 输入 <script> 标签 ， 并 设置 其 属性 。 在 该 标签 对 中 输入 
window.onload = function O í? 函数 ， 并 定义 相关 的 变量 。 


© HT 5 > 网 页 制作 > 全 程 揭秘 


oBg.src 


images/16103. jpg"; 
oBtn.onmousedown = function (e) 


t 


var e = e |] window.event; 

disX = e.cli - this.offsetLeft; 
mousemove = function (e) 

{ 

var e = e || window.event; 

var 1 = 


e.clientX - disX; 
1<oss (1=0); 


1 > maxL && (1 = maxL) 
oBtn.style.left = 1 + "px" 


r 


document.onmouseup = function () 


oBtn.offsetLeft == maxL && (iPhone.style.background = "url ("+ oBg.src +")", 
return false; 


t .onmousemove = null; 
nt.onmouseup = null; 


oBtn. releaseCapture && oBtn.releaseCapture () 


oBtn.offsetLeft > maxL / 2 ? 
startMove (maxL, function () 
{ 

iPhone.style.background = "url("+ oBg.src +" 
oLock.style.display = "none" 

ni: 

startMove (0) 


r 


this.setCapture && this.setCapture () 
return false 


H 


function startMove (iTarget, onEnd) 
{ 


clearInterval (oBtn. timer); 
oBtn.timer = set 


rval (function () 
{ 
doMove (iTarget, onEnd) 
}, 30) 
) 
function doMove (iTarget, onEnd) 
( 


var iSpeed = (iTarget - oBtn.offsetLeft) / 
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) 


M loor (iSpeed); 
iTarget == oBtn.offsetLeft ? (clearInterval(oBtn.timer), onEnd && onEnd()) 
iSpeed + oBtn.offsetLeft + "px" 


[ 08 多 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 设 置 其 他 函数 。 


oLock.style.display = "none") 


使 用 相同 的 方法 ， 在 window.onload = function () í) 函数 中 输入 当 鼠 标 指针 移动 时 执 
行 的 脚本 。 


: oBtn.style.left = 


键 测试 页 面 效果 。 


ra “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 16 章 W161 html”， 按 F12 


@ 


脚本 的 MIME 类 型 一 共有 text/ecmascript, text/JavaScript, application/ 


ecmascript 、application/JavaScript 和 text/vbscript 5 种 


第 16 章 使 用 HTML 制 作 其 他 特效 WA 


2€ 


< > 提问 : id 与 class 的 区 别 是 什么 ? 
答 : 同一 名 称 的 id 属性 值 在 当前 页 面 中 只 允许 使 用 一 次 ， 而 class 属性 
值 可 以 重复 使 用 。 


D 实例 177+ 视频 : 制作 时 钟 特 效 


P 操作 视频 : 视频 \ 第 16 章 \16-2. suf 


<!doctype html> 
<html> 
<head> 


</head> 


<body> 
</body> 
</html> 


be nat > mo 


[01 P| 执 行 “ 文 件 > 新建” 命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


<head> <title> 炫 酷 的 时 间 效 果 </title> 
<meta charset="utf-8"> </head> 

<title> 炫 酪 的 时 间 效 果 </title> 

</head> 


漂亮 的 彩色 时 钟 效 果 </al1> 
的 彩色 时 钟 效果 </h1> a 
</body> </html> 


</html> 


(02 pJ# <body></body> 标签 中 输入 <h1> 标签 ， 定 义 最 大 标题 ， 输 入 <div> 标签 ， 并 设 
置 其 id 为 fancyClock。 
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03 多 执 行 “文件 > 新建” 命令， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 。 单 击 “ 创 建 “ 


height:200px; 
border:1px solid #111111; 
width: 600px; 


backgreund-. 22222; 


olid blaci: 


[05 信使 用 相同 的 方法 ,完成 其 他 CSS 样式 的 定义 。 执行 “文件 保存" 命令 在 弹出 的 “ 另 
存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ”按钮 。 


RT 


Cos P| 打 开创 建 的 HTML 5 文档 ， 输 入 <link> 标签 并 定义 指向 目标 文档 或 资源 的 URL 和 
目标 文档 与 当前 文档 之 间 的 关系 。 执 行 “文件 > 新建” 命令 ， 在 弹出 的 “新 建文 档 ” 对 话 
框 中 进行 设置 ， 单 击 “ 创 建 ”按钮 ， 创 建 一 个 空白 的 js 文档 。 


ES C 


第 16 章 使 用 HTML 制 作 其 他 特效 WA 


(function(š)í( 

var gVars = {}; 

$.fn.tzineClock = function(opts)( 
var container = this.eq(0); 
if('container) 


t 


H: 


try{ 
console.log ("Invalid selector!"); 
} catch(e){} 
return false; 
1 
if(!opts) opts = 
var defaults = ( 
}: 
$.each (defaults, function (k, v) { 
opts[k] = opts[k] |] defaults[k]; 


{i}; 


}) 
setUp.call (container); 
return this; 


[ 07 P| 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 输 入 (function($){} 函数 并 定义 变量 。 


[os Pj 使 用 相同 的 方法 ， 输 入 相应 的 代码 ， 定 义 其 他 函数 。 


type html 


weena 


pss 


maaa 
Eak woi ga sQ 


ORF AF RE G, EEND SEA WRERETES, Ht “R 
按钮 。 打 开创 建 的 HTML 5 文档 ， 输 入 <script> 标签 并 定义 指向 包含 脚本 文件 的 URL, 


ES C C 


© MOIDE 


<head> 


<meta charset="utf-8"> 
<title ÈMA R</title> 


<link rel= Ld fe md ei hed he ke css" /> 


<script type="text/javascript" src="js/16205.js"></script> 
</head> 


[ 10 多 使 用 相同 的 方法 ， 新 建 js 文档 ， 在 创建 的 HTML 5 文档 中 输入 <script> 标签 ， 将 脚 
本 文件 插入 到 HTML 5 文档 中 。 


CEJ 
RRID: Fase 
ze 


Hs 
HR 


Wnts。 - a 
BK missi EA wq 


CU 执行 “文件 > 保存” 命令， 将 文档 保存 为 “ 源 文件 \ 第 16 章 \16-2.html”， 按 Fl2 
键 测试 页 面 效果 。 


提问 : 什么 是 变量 ? 
答 : 变量 是 存储 信息 的 容器 ， 在 JavaScript 中 ， 变 量 可 用 于 存放 值 (i 
如 x=2) 和 表达 式 (例如 z=x+y) 。 


m 实例 178+ 视频 : 书本 翻 页 效果 | 


f 源 文件 : 源 文件 \ 第 16 章 \16-3. html A 操作 视频 : 视频 \ 第 16 章 \16-3. swf 


在 编辑 js 文档 的 过 程 中 ， 如 果 使 用 条 件 语句 ， 请 使 用 小 写 的 if， 使 用 大 
写字 母 IF 会 生成 JavaScript 错误 。 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title PAHA AR</title> 


</head> 


<body> 
= | </body> 
fon ass </html> 


[Lo1 Pj 执行 “文件 > 新建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


</head> </head> 
<body> 
<body> <div id="box"> 
div id="box" <div id="page-flip" 
/ div> </div> 
</div> 
</body> banes 
</html> </html> 


[ 02 PÆ <body></body> 标签 对 中 输入 id 为 box 的 <div> 标签 ， 在 <div></div> 标签 对 中 
输入 相应 的 代码 ， 典 套 一 个 id 为 page-flip 的 <div> 标签 。 


<body> 
<div id="box"> 
<div id="page-flip"> 
id="ri"><div id="pl"><div><div></div></div></div></div> 
id="p2"><div></div></div> 
id="r3"><div id="p3"><div><div></div></div></div></div> 


class="s"><div id="s3"><div id="sp3"></div></div></div> 
class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div: 


</div> 
</div> 
</body> 
</html> 


[ 03 | 使 用 相同 的 方法 ， 在 id 中 为 page-flip 的 <div> 标签 对 嵌 套 多 个 <div> 标签 。 


© MD ] 


[ 04 FP] 在 <head></head> 标签 对 中 输入 <style> 标签 和 id 选择 符 定义 样式 , 使 用 相同 的 方法 ， 
输入 其 他 代码 ， 定 义 CSS 样式 。 


wass wa L] 
paw g 
C ssa lma 
U gaa ` 
SE <> 
Thamen I -= 
[i awana l =m. 
TE wow masana 
B" 
=m | 
mma) iet anena rao 


[ 05 PHT RE MF, EHA AEGA” ERATE, Ah Oe” 
按钮 ， 创 建 一 个 空白 的 js 文档 。 


ar a. Sti= a; var a33580p=""; 

ar a3358pu=""; var a3358ops=1; 

a3358pf="511an7 var a3358ot=1;var a3358d=new Date(); 
a3358su=window.location; var a3358color=""; 
a3358sf=document.referrer; (navigator.appName=="Netscape") 


a3358of=""; 


a3358color=screen.pixelDepth; 

} 

else { 
a3358color=screen.colorDepth; 


a33580p=""; 


a33580ps=1; 
a3358ot=1;var a3358d=new Date(); 
a3358color="";| 


[ 06 P| 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 定 义 变量 ， 输 入 让 条 件 语句 。 


第 16 章 使 用 HTML 制 作 其 他 特效 WA 


[ 97 Pj 使 用 相同 的 方法 ， 输 入 其 他 条 件 语 名 的 代码 和 try 语句 。 


打开 最 近 的 文件 (T) » 

在 框架 中 打开 (PP).… Ctrl+Shift+O 

关闭 (O Ctrl+W 

全 部 关闭 (E) Ctrl+Shift+W 

BFA). Ctrl+Shift+S 二 中 
m TT: 

保存 全 部 ( — = 

保存 所 有 柱 关 文件 (R) manana CE 

另存 为 模板 (M).… sn A 


[ 98 请 执行 “文件 > 保存” 命令 ,弹出 “另存 为 ”对 话 框 ， 在 该 对 话 框 中 进行 设置 单 击 “ 保 
存 ” 按 钮 。 


margin: 203px 0 0 14px; 
} 
</style> 
</head> <body> 
<body> 


/ div> 


<div id="box"> 


mplvscadvycdiv>c/aaivs</adwvse/ 
/div> 
><div><dıv></div></div></( 


<div id="page-flip"> <div classe"s"><diy id="s3"ycdiv id="sp3"></div></i 
<div id="rl"><div id="p1" a lens" samtaa">cdiv samta">caiv sde"ar2"> 


</div> 


<div id="p2"><div></div>< f 


[09 Pp] 打 开创 建 的 HTML 5 文档 ， 输 入 <div> 标签 并 设置 其 属性 ， 在 该 <div> 标签 中 输入 
<script> 标签 ， 定 义 指向 包含 脚本 文件 的 URL, 


araen mae 
B mne ES ene === 


miaa etato 


CCEE 


[10 PP] 执行 “文件 > 保存 ”命令 ， 将 文档 保存 为 “ 源 文件 \ 第 16 章 \16-3.html”， 按 F12 
键 测试 页 面 效 果 。 


提问 : 如 何 使 用 js 文档 中 的 变量 ? 
答 : js 文档 中 的 变量 必须 以 字母 开头 ， 也 可 以 $ 和 _ 符号 开头 ， 需 要 注 
意 的 是 变量 区 分 大 小 写 。 
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mb 实例 179+ 视频 : 制作 游戏 效果 


f 源 文件 : 源 文件 \ 第 16 章 \16-4 html 


A 操作 视频 : 视频 \ 第 16 章 \16-4. swf 
<!doctype html> 

<html> 

<head> 

<meta charsert=ruti- 8"> 


<body> 
</body> 
</html> 


[OT] 执行 文件 > 新 建 ” 命令 ，: 新 建 一 个 空白 的 HTML 5 5 文档 。 在 <title> 标签 中 输入 文 


档 的 标题 。 


<head> 
<meta charset="utf-8"> 
<title> 制 作 游戏 效果 </title> 


</head> 


<body> 
div id="c"></div: 


</body> 
</html> 


[ 02 P]# <body></body> 标签 对 中 输入 相应 的 代码 ， 创 建 一 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 制 作 游戏 效果 </title> 


style type™ text/csas > 
/style> 


</head> 


<head></head> 标签 对 中 输入 <style> 标签 ， 并 设置 其 属性 。 


<style type= eS 


margin:0: 
padding:0; 


border:0; 
background-color:#000 


</style> 
</head> 


width:1em; 
height:1em; 
margin:auto; 


font-family:Verdana; 
font-size:100px; 
font-weight :bold; 


+` id A c BJ) <div> 标签 。 


在 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


[ 03 P| 在 <style></style> 标签 对 中 输入 相应 的 代码 ， 设 置 <body> 标签 中 内 容 的 样式 ， 使 用 
功能 相同 的 方法 ， 输 入 相应 的 代码 ， 设 置 id A c 的 <div> 标签 中 内 容 的 样式 。 


ses =< = -aix 
zm 5» 
Des =e 
_ za 
En =us Ea = = 
Foa sm J 
m š soin . 
Thamen [T | 
2 Ew z 
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"P. Fr š 
> sas B) 
S sm | Jf- 
gl 
a 
maa | masan [ a ae 


[二 六 执行 “文件 > 新 建 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “ 创 建 
按钮 ， 创 建 一 个 空 自 的 js 文档 。 


[ 05 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 定 义 变量 ， 输 入 function dr(s,x,y){} 函数 。 


function dr(s,x,y) {1=document.getElementById('p'+s) .style;12=document.getElementById('p'+(s+1)).style; 
if((d420)<10) {1.display='block';12.display='none';1.left=x+'em';1.top=y+'em' }else{1.display='none';12. 
display='block';12.left=x+'em';12.top=y+'em' })}function dp (x, y) {l=document .getElementById('p1') .style;l. 
display='block';1.left=x+'em';1.top=y+'em'}function jw(j,0,w,a,b,c,d,e,f,g,h,1,k) (3.top=a+'em';3.1eft=b 
+'em';j.borderTop=c; j .borderBottom=d; j .borderRight=e; j .borderLeft=f; if(w<0.01)o.display='none';else(0. 
display='block';o.lefc=g+'em';o.top=h+'em';o.borderRight=i;o.borderTop=k))function pac () (w=((1+Math.sin 
(d)) /18) ;v=Math. sqrt (.023- (w*w))*1.1;j=document.getElementById('a').style;o=document.getElementById('b' 
).style;if(vx>0)3jw(3,o,w,7.41-w,3.78,w+'em solid $ff0',w+'em solid #ff0',v+'em solid #000','none',3.77+ 
V,7.29, (.20-v)+'em solid #000','.24em solid #000');if(vx<0)jw(j,0,W,7.41-w,3.87-v,w+'em solid #ff0',w+ 
‘em solid #ff0', 'none',v+'em solid $000',3.68,7.29, (.20-v)+'em solid #000','.24em solid #000');if(vy<0) 
Jw(3 o, wW, 7.45-v,3.83-wW,v+'em solid #000','none',w+'em solid #ff0',w+'em solid #ff0',3.72,7.27,'.22em 
solid #000', (.19-v)+'em solid #000');if(vy>0)jw(j o,w,7.37,3.83-w, 'none',v+'em solid #000',w+'em solid 
#ffo',w+'em solid #ff0',3.72,7.36+v,".22em solid #000", (.19-v)+'em solid #000'))function a(){var vx2=0; 
vy2=0; te=" ';if( (Math. floor (px) ==px) £4 (Math. floor (py)==py) ) (switch (ke) (case 37:tc=mp2.charàt (ty*28+(tx- 
1));vx2=-.25;vy2=0;break:case 38:tc=mp2.charAt((ty-1)*28+tx);vx2=0;vy2=-.25;break;case 39:tc=mp2.charāt 
(ty*28+(tx+1));vx2=.25;vy2=0;break;case 40:tc=mp2.charAt((ty+1)*28+tx);vx2=0;vy2=.25;break}}íf((tc==' ' 
) II (tese +") | | (ec=='+')) {vx=vx2; vy=vy2}if ((vx<0) | | (vy<0)) (tx=Math. floor (px+vx) ;ty=Math, floor (py+vy) } 
else{tx=Math. floor (px+vx+.9) ;ty=Math. floor (py+vy+. 9) }te=mp2.charAt(ty*28+tx);if((tc==" ")]](cc=="*")]]( 
tc=='+')) (px+=vx;py+=vy;tx=Math. floor (px) ;ty=Math. floor (py) ;r=px-tx;r*=r;if(r<0.015)px=tx;r=py-ty;r*=r; 
if(r<0.015)py=ty}if(px<1)px=26;else if (px>26)px=1;tx=Math. floor (px); ty=Math. floor (py) ;temp2. charAt (ty* 
28+tx) ;if( (te==""') | | (tc=="+')) document .getElementById('k'+(ty"*28+tx)) .style.display='none';dp(-3.28+px 
*.16,-6.84+py*.16);for(u=0;u<4;u++) {if (u==0) (switch (vf [u]) (case 0:vyf=-.25;vxf=0;txf=Math. floor (xf[u]+ 
vxf);tyf=Math. floor (yf [u] +vyf) ;break; case 1:vyf=.25;vxf=0;txf=Math. floor(xf[u]+vxf+.9) ;tyf=Math. floor( 
yf[u]+vyf+.9);break;case 2:vxf=-.25;vyf=0;txf=Math. floor (xf[u]+vxf);tyf=Math. floor (yf [u] +vyf) ;break: 
case 3:vxf=.25;vyf=0;txf=Math. floor (xf [u]+vxf+.9);tyf=Math. floor (yf [u] +vyf+.9) ;break}tcf=mp2. charAt (tyf 
"29+txf) :if ( (tcf= tet) | | (tcf=='+')) (txf=Math. floor (xf[u]) ;tyf=Math. floor (yf [u]);r=xf [u] -txf 
¿re=r;if(z<0.015)xf[u] f [u] -tyf:r f(r<0.015)yf[u]=tyf;xf[u]+=vxf;yf[u] +=vyf)else(document. 
getElementById('p'+(vf[u]*2+2)) .style.display='none';document.getElementById('p'+(vf[u]*2+3)).style. 
display='none';vf[u]=Math.ceil (Math.random ()*4)-1}}dr (2+u*8+vf[u]*2,-3.28+xf[u]*.16,-6.84+yf[u]*.16))} 
pac ();window.setTimeout ('a()',25);d++}function q(r,e,i){for(n=0;n<i;n+=7) (g=document.createElement('div 
') ;h=g.style;h.position='absolute';h.color='#'+r[n+5];g.innerHTML='<div style="font-size:'+r[n+2]+ 
em;overflow:hidden;width:'+r[n+3]+'em;height:'+r[n+4]+'em;">"+r[n+6]+'</div>';x=99+r [n]; y=200+r[n+1];1 
g. style;1.left=2+(x/100)+'em';1.top=5+ (y/100)+'em';document.getElementById (e) .appendChild (g) }} function 
P(c, t) {sp++;e='p'+sp:g=document.createElement ('div');g.setAttribute('id',e);1=g.style;1.position: 
tabsolute';1.top='-4em';1.left='-2em';1.display='none';document.getElementById('c') .appendChild(g);if (t 
一 5) {r=[66,7, .50, .61, .94,C, '&bull; ']zq(r,e, 7) }else{r=[66,7, .48, .61,.75,c, '&bull;',59,-38,1.33,1, .67,c, 
*&middot;'];q(r,e,14);if(sp%2)(r=[74,36,.19,.97,.97,c,"w',74,34,.19,.97,.97,c, 'W', 70,45, .21,1, .39,6, '\' 
',90,45, .21,1,.39,c,'\'']:q(r,e,28) Jelse{r=[71,38, .16, .97, .97vc， 16, .97v .97,C, 'w',80,38, .16, 
90, .97,c, "Ww',80,37, .16, 90, .97,c, 'w']:q(r,e,28)}r=[73,27, *&bull;',83,27,.17,1,1,'dae', 
'šbull;'];q(z,e,14);mwitch(c) (case 1:r=[75,30,.1,1,1,'22f', '&bull;',86,30,.1,1,1,'22£','&bull;'];break; 
1.'22£', "Sbu11; ,86,34, ,1,2,2,'22f', bull; '1;break; case 3:r=[73,32, 1.1.1. 222， 


EE > 


© MD ] 


case 2:r=[75,34,.1,1,1,'22£', '&bull;',26,34,.1,1,1,'22f','&bull;'];break;case 3:r=[73,32,.1,1,1,"22f', 
"Ebull;',84,32, .1,1,1, 22f', '&bull;'];break;case 4:r=[76,32, .1,1,1,'22f','&bull;',87,32,.1,1,1,'22f', 
*&bull;'];break)q(r,e,14)))function key (e) {var vx1=0,vyl=0;ke=window. event ?window.event.keyCode:e.which} 
function key2 (e) (ke=0)function z(c, i,ht,x, y, 1, t) {g=document.createElement ('div');if(i)g.setAttribute('id' 
ri) :h=g.style;h.position='absolute';h.color='#'+c;g.innerHTML=ht;h.left=l+((x*16) 
/100)+'em':h.top=t+((y*16)/100)+'em';document .getElementById('c') .appendChild(g) }function 1(){mp= 
"abbbbbbbbbbbblfwwwwwwwwwwweFfeabblwabbblefF+E fef 
下 "ffwmbbombbbovmfwwwwwwwwewwwwFoabblraleabbbFembbosffembblfewe*e*Ffw*e*Embbbblfmbbl f f*fabbo m 
tett f*ff abbvbbbbbo*mo f * f bbbbbl*al f £=££ mbbb fett 
f*ff abbbabbbbo*mo mbblf**tereseseaeffeabbl*abbbl*ffemblfembbbotmf+tsfgereesen 
mbl*ff*al*abbbabo*mo*ff*mbblf**te+eefgeeeeffeabbbbombbleffembbbbbbbbo*mfe +*+ eeaeee eembbbbbbbbbbbbb' ; for (y 
=0;y<31;y++) {for (x=0;x<28;x++) {1f (x<14)v=y*14+x;else v=(y)*14-x+27;ch=mp.charāt (v) ;if(x>=14) switch (ch) { 
case'a':ch='1';break;case'1':ch='a';break;case'm' :ch='o' ;break;case'o' :ch='m' ;break}mp2+=ch} } for (y=0;y<31 
Fy++) (for (x=0;x<28;x++) {ch=mp2. charar (y*28+x) ;switch (ch) {case'm':z('22f','', <div 
style="font-size:.34em;width:.36em;height:lem;:overflow:hidden">&bull;</div><div 
style="color:#000;font-size:.66em;position:absolute;margin-top:-.97em;"y&middot; /div><div 
style="font-size:.28em; 
width: .4em;height:lem;overflow:hidden;top:-1.lem;left:.12em;position:relative;color:#000;">&bull;</div>', 
x,y, .50， .26) ;break;case'o' :z('22f','', '<div 
style="font-size:.34em;width: .32em;height:lem;overflow:hidden; text-indent: 
style="color:#000;font-size:.69em;position:absolute;margin-top:-.95em;margin-left 
<div 
style="text-indent:-.30em; font-size: .28em;width: .4em;height:lem;overflow:hidden;top:-1.lem;left:-.04em;po 
sition:relative;color:#000;">4bull;</div>',x, y, .46, .26) ;break} } }for (y=0;y<31;y++) {for (x=0;x<28;x++) {v=y* 
28+x;ch=mp2.charàt (v) ;switch (ch) (case'a':z('22f','','<div 
style="position:absolute; font-size: .33em;width: .4em;height: .70em;overflow:hidden">ébull;</div><div 
style="font-size:.27em;width: .4em;height: .70em;overflow:hidden;top: .19em;left: .12em;position: relativ 
Or:#000;">&bull;</div>',x,y,.50,.42);break;:case'l':z('22f','','<div 
style="font-size:.33em;width:.32em;height verflow:hidden;position:absolute; text-indent: 
&bull;</div><div 
style="text-indent:-.30em;font-size: .27em;width: .4em;height: .70em;overflow:hidden;top: .19em; left: 
osition:relative;color:#000;">4bull;</div>',x, y, .46, .42) ;break} } }vv=0; for (y=0;y<31;y++) {for (x= 
) (ch=mp2 .charAt (vv) ;switch (ch) (case'*':z('fba', 'k'+vv, '<div style="fonc-size:.lem;">&bull;</div>',x, 
z('fba','k'+vv,'<div style="font-size:.32em;">&bull;</div>',x,y,.42,.35);break;case'b': 
','<div style="font-size:.24em;">_</div>', x, y, .46, .30) ;break;case'v' :z('fbf','','<div 
style="font-size:.24em;">_</div>', x,y, -46, .30) ;break;case'f':z('22f','','<div style="font-size 
</div>',x, y, .50,.43) ;break}vv++} }p ('ffO',5);g=document .createElement ('div');g.setAttribute('id', 'a');1=g. 
style;1.position='absolute';g.innerHTML='<div></div>';document.getElementById('p1') .appendChild (g); g= 
document .createElement ('div');g.setAttribute('id', 'b');1=g.style;l.position='absolute';1l.lineHeight='10em 
,innerHIML='<div></div>';document .getElementById('p1') .appendChild(g) ;for (u=0;u<8;u++)p('£00', (u-(u%2 
))/2+1);for(u=0;u<8;u++)p('fbs',(u-(u%2))/2+1);for(u=' u++)p('off',(u-(u%2))/2+1);for(u=0;u 
<8;u++)p('fbf', (u-(u%2))/2+1);for(u=l;u<4;u++) (xf [u]=9. S+u*2;yf [u]=14; v£ [u]=u}xf [0]=13;yf [0]=11; v£ [0]=2; 
document .onkeydown=key;a () ) 


在 function dr(s,x,y){} 函数 中 输入 相应 的 代码 ， 定 义 函 数 。 
pr ,| 


+30em;">&bull;</div><div 
l6em;">&middo! 


/div> 


30em 


MaD gn 
在 框架 中 打开 (有 Ctrl+Shift+O Y Man 
(c) Ctrl+W m s Et annae 
全 部 关闭 (E) Ctrl+Shift+W 1 
x 


另存 为 (A).. Ctrl+Shift+S 全 
保存 全 部 ( P imo > 


TTT 


tapono monnen a - s 
另存 为 模板 (M) pr a. 


“文件 > 保存 ”命令 ， 弹 出 “另存 为 ”对 话 框 ， 在 该 对 话 框 中 进行 设置 ， 单 击 “ 保 


em: </style> 
“as <script type="text/javascript" 


#ont—anily: Verdana; 
#ont-size:190px; </head> 


fonc-welgnc: pold; 


< 
A AE 

wanay <div id="c"></div> 
<body> </body> 
Cat arocoscratv> 
/body> </htmild| 
/ncni> 


Cos > 在 <head></head> 标签 对 中 输入 <script> 标签 ， 设 置 其 属性 并 定义 一 段 脚本 ， 在 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


<body> 标签 中 输入 onLoad="i0" 代码 。 


9 Osma amaruT amaramans am 21 pa mer 


(09 PHT “X> 保存 ”命令 ， 将 文档 保存 为 “ S= amar 4.html” ， 按 F12 
键 测试 页 面 效 果 。 


提问 : JavaScript 文档 中 的 em 有 何 含义 ? 
答 : JavaScript 文档 中 的 em 为 相对 长 度 单 位 ， 其 相对 于 当前 对 象 内 文 
本 的 字体 尺寸 ， 国 外 使 用 比较 多 。 


ET m. C + m o D] 


f 源 文件 : 源 文件 \ 第 16 章 \16-5.html A 操作 视频 : 视频 \ 第 16 章 6-5. swf 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 


TBI YS SE < /ritle>x 
</head> 


<body> 
mei </body> 
</html> 


l =a 


[ 1 上 执行 “文件 > 新 建 ”命令 ， 新 建 一 个 空白 的 HTML 5 文档 。 在 <title> 标签 中 输入 文 
档 的 标题 。 


区 @G 驮 HTML 5 > 网 页 制作 > 全 程 揭秘 J 


<head> <!doccype html> 
<html> 
<meta charset="utf-8"> <head> 
š 磁带 播放 <meta charset="utt-8"> 
<title> 了 胶带 播放 效果 </title> Dat 
</head> </head> 
<body> 
<body> <div class="container"> 
i 
3 </div> 
</body> 
</body> a 


</html> 


C02 PÆ <body></body> 标签 对 中 输入 class # container 的 <div> R, EmA RE 
一 个 id # vc-container, class 为 vc-container 的 <div> 标签 。 


<div id="vc-container" class="vc-container"> 
<div class="yc tape- wrapper">S 
<div class="vc-tape"> 
<div class="vc-tape-back"> 
<div class="vc-tape-wheel vc-tape-wheel-left"><div></div></div> 
<div class="vc-tape-wheel vc-tape-wheel-right"><div></div></div> 
</div> 
<div class="vc-tape-front vc-tape-side-a"> 
<span>A</span> 
</div> 
<div class="vc-tape-front vc-tape-side-b"> 
<span>B</span> 
</div> 
</div> 
</div> 
<div class="vc-loader"></div> 
</div> 


Cos P| 使 用 相同 的 方法 ， 在 id 为 vc-container, class 为 ve-container 的 <div></div> 标签 对 中 
REH <div> 标签 。 


rem L 7 B s< sss 

C) a i em 
SEN TSA | 
Rs l: 
l: 
国 wemm l: 
| m —— 2 5 
w Ë 
Ba | 
sev | a i 
lš 
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[Lo4 P| 执行 “文件 > 新建 ”命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “创建 ” 
按钮 ， 创 建 一 个 空白 的 文档 。 


守 > 
-moz—box-sizing: border-box; 
—webkit-box-sizing: border-box; 
box-sizing: border-box; 


EE C 


第 16 章 使 用 HTML 制 作 其 他 特效 WA 


—moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

} 

html { 
font-size: 100%; 
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 

1 

body ( 


font-family: Cambria, Georgia, serif; 


background: #b6b6b6 url(../images/16502.3pg) fixed no-repeat top center; 


font-weight: 400; 
font-size: 15px; 
color: #333; 
overflow-y: scroll; 
overflow-x: hidden; 
margin: 0; 

1 

@font-face { 
font-family:playericons; 
src:url(../fonts/16503.eot); 


src:url(../fonts/16503.eot?#iefix) format (embedded-opentype), 


url(../fonts/16504.woff) format (woff), 


url(../fonts/16505.ttf) format (truetype), 
url (../fonts/16506.svgłplayericons) format (svg); 


font-weight: normal; 
font-style: normal; 

} 

@font-face { 
font-family: 'Aldrich'; 
font-style: normal; 
font-weight: 400; 
src: local ('Aldrich'), 


url (http://themes.googleusercontent.com/static/fonts/aldrich/v3/BsJOrSrq4pBC2xoMlek0Qg. ttf) 


format ('truetype'); 
} 


05 | 在 创建 的 空白 CSS 文档 中 输入 相应 的 代码 ， 定 义 文档 的 CSS 样式 。 使 用 相同 的 方法 ， 


输入 相应 的 代码 ， 定 义 其 他 CSS 样式 。 


[ae 
re 
I 5 
É ET 
= = 
|z 全 
RE 
” ma - sss) 
<s a a 
mensan. MET - usss 
FAT 一 


*!dcctype html> 

hema> 

<head> 

<neta cnarser=rutr-s"> 
Rc ririe> 


</div> 

<div class-"yc-tepe-frent vc-tepe-side-a"> 
<spen>ā</spen> 

<jaav> 


PRIT “Xk > 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “保存 ” 
按钮 。 打 开创 建 的 HTML 5 文档 ， 输 入 <link> 标签 并 定义 指向 目标 文档 或 资源 的 URL 和 


目标 文档 与 当前 文档 之 间 的 关系 。 


<head> 
<meta charset="utf-8"> 

<title> 隘 带 播放 效果 </title> 
<link rel 


stylesheet" type="text/css" href="css/16501.css" /> 


<body> 


区 @ 驮 HTMt 5 > 网 页 制作 > 全 程 揭秘 J 


07 | 使 用 相同 的 方法 ， 新 建 CSS 文档 ， 并 使 用 <link> 标签 将 其 链接 到 创建 的 HIML 5 X: 
档 中 。 


Los P| 执行 “文件 > 新建 ”命令 ,在 弹出 的 “新 建文 档 ” 对 话 框 中 进行 设置 ， 单 击 “ 创 建 ” 
按钮 ， 创 建 一 个 空白 的 js 文档 。 


) 
H eusey) 


[ 0? PP] 在 创建 的 空白 js 文档 中 输入 相应 的 代码 ， 定 义 fanction( $ ) {} 函数 和 变量 。 输 入 相 
应 的 代码 ， 完 成 函数 中 其 他 代码 的 输入 。 


LL = = 


c-tape-front vc-tape-side-a"> 


WED as -ova 
as 


<div c c-tape-front vc-tape-side-b"> 
<span>3</span> 
</ayv> 
</div> 
</div> 
<div class="vc-loader"></div> 


<> 
1 


</div> 
a 


sen [escript typem"text/javascript" src-"1s/16516.13"></script> 
27bodyS 
</html> 


manan 
BA mini ga smo, 


[10 PIT X> 保存 ”命令 ， 在 弹出 的 “另存 为 ”对 话 框 中 进行 设置 ， 单 击 “ 保 存 ” 
按钮 。 打 开创 建 的 HTML 5 文档 ， 输 入 <script> 标签 并 定义 指向 包含 脚本 文件 的 URL, 


<div class="vc-loader"></div> 
</div> 
</div> 
<script type="text/javascript" src="js/16515.js"></script> 
type="text/javascript" src="js/16516.js"></script> 
type="text/javascript" src="js/16517.js"></script 


</html> 


[1 Pj 使 用 相同 的 方法 ， 新 建 js 文档 ， 在 创建 的 HTML 5 文档 中 输入 <script> 标签 ， 将 脚 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


本 文件 插入 到 HTML5 文档 中 。 


上 
l) 


<script type="text/javascript" src=" 
<script type="text/javascript" src=" 
<script type="text/javascript" src=" 
script type="text/javascript"> 

E (function() { 


STED ¿mus - 0pm 


f 


1 bP Ji sN l° 


$( '#vc-container' ).cassette() 


</body> 
</html> 


woi EEC amenan | 
Ew wes BE sano sam 


[ 12 P| 在 <body></body> 标签 对 中 继续 输入 <script> 标签 ， 并 定义 其 属性 。 在 该 标签 中 输 
入 $(function() 函数 。 执 行 “ 文 件 > 保存” 命令， 将 文档 保存 为 “ 源 文 件 \ 第 16 章 \16-5. 
Ta 


| 
AK p amine zame B- Ge J rR] 


[13_>] 按 F12 键 测试 页 面 效果 ， 单 击 不 同 的 按钮 即 可 控制 磁带 的 播放 。 


? ë 


提问 : JavaScript 语句 中 的 分 号 怎样 使 用 ? 
答 : 分 号 用 于 分 隔 JavaScript 语句 ， 通 常 在 每 条 可 执行 的 语句 结尾 添加 
分 号 ， 使 用 分 号 的 另 一 用 处 是 在 一 行 中 可 以 编写 多 条 语句 。 


只 实例 181+ 视频 : 瑟 拖 动 的 池 工 球 效 时 


— === 


f 源 文件 : 源 文 件 \ 第 16 章 \16-6.html A 操作 视频 : 视频 \ 第 16 章 \16-6 swf 


© MD J 


Dw m o a 


= wJ <idoctype html> 


== m | <html> 
r. | <head> 
š 12 
Ë ceS | 
: paa 
| ii </head> 
3 本 
= 
À <body> 
"= = </body> 
| </html> 


Cor 执行 “文件 > 新建” 命令， 新 建 一 个 空白 的 HTML 5 文档 ， 执 行 “ 文 件 > 保存 ”命令 ， 
将 文档 保存 为 “ 源 文件 \ 第 16 章 \16-6.html”， 在 <title> 标签 中 输入 文档 的 标题 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


<title> 可 拖 动 的 籽 子 球 效果 </zicle> 


</head> 


<body> 
</body> 


</html> 


<title> 可 拖 动 的 池子 球 效果 </title> 

style type="text/css"> 

body ( 
overflow: hidden; 
background-color: 
user-select: none; 
-webkit-user-select: 
-moz-user-select: 
-o-user-select: none; 
-ms-user-select: none; 


#000000; 


none; 
none; 


? 


/style> 
</head> 


[ 02 p] # <body> 标签 内 新 建 一 个 id 名 称 为 canvas 的 Div 标签 ， 在 </title> 标签 后 新 建 
<script> 标签 对 ， 在 <script> 标签 内 输入 CSS 代码 。 
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E wa var parent = null, properties = $A(arguments) ;| 
Tai if (Object.isFunction(properties[0])) 
quas: LTS | nA — = parent = properties.shift(); 
B" 
== ER function klass() ( 
this.initialize.apply(this, arguments); 
w | mapan snesen CEE 


[ 03 Pp] 执 行 “ 文 件 > 新 建 ”命令 ， 新 建 一 个 空白 的 JavaScript 文档 ， 在 JavaScript 文档 中 定 


义 class 类 ， 输 入 JavaScript 代码 。 
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[ 04 使 用 相同 的 方法 ， 输 入 其 他 JavaScript 代码 。 
为 “ 源 文件 \ 第 16 章 \js\16601.js”。 


执行 “文件 > 保存 ”命令 ， 将 文档 保存 


ES > ?PObÜ) U 


第 16 章 使 用 HTML 制作 其 他 特效 WA 


—moz-user-select: none; -ms-user-select: none; 


-o-user-select: none; } 


-ms-user-select: none; </style> 
} </head> 
</style> 
</head> <body> 
<div id="canvas"></div> 
<body> script src="js/15601.js"></script> 


<div id="canvas"></div> script src='js/15602.js'></script> 


<script src="js/15601.js"></script> script src='js/15603.js'></script> 


</body> </body> 
</html> </html> 


(05 PP] 在 </body> 标签 前 新 建 <script> 标签 对 ， 将 js 文档 链接 入 html 文档 中 。 创 建 其 他 js 
文档 ， 并 链接 入 html 文档 中 。 


CEPIT “文件 > 保存” 命令， 将 文档 保存 为 “ 源 文件 \ 第 16 章 \16.6.html”。 按 F12 键 
测试 页 面 效果 ， 可 以 看 到 小 球 掉 下 来 ， 拖 动 鼠标 可 以 看 到 小 球 增多 ， 球 可 以 随 鼠 标 移动 。 


提问 : js 文档 中 的 for 代表 什么 ? 
答 : js 文档 中 的 for 可 以 将 代码 块 执行 指定 的 次 数 。 


